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第 9 章 设计 对 话 框 


9.3 ”输入 对 话 框 


前 面 在 介绍 JavaScript 的 时 候 ， 曾 介绍 过 它 的 三 个 基本 对 话 框 alert()、confirm()、 
prompt()。 它 们 分 别 表示 提示 对 话 框 、 确 认 对 话 框 、 输 入 对 话 框 。 从 本 节 开 始 介绍 如 何 通 
过 jQuery 来 模拟 创建 这 三 个 对 话 框 。 本 节 创 建 输入 对 话 框 ， 其 实现 原理 是 : 利用 弹出 层 ， 
在 层 上 添加 用 户 输入 功能 ， 并 在 层 隐 藏 后 将 用 户 输入 内 容 显示 在 页 面 上 。 其 中 ， 使 用 到 了 
jQuery 函数 ready()、click()、css()、show()、hide()、text()、val()。 

其 功能 实现 如 下 。 

〈1) 为 页 面 中 触发 弹出 对 话 框 的 元 素 添 加 单 击 事件 , 在 事件 中 触发 对 话 框 所 在 层 显 示 ， 
并 定位 对 话 框 的 具体 显示 位 置 。 

(2) 在 触发 对 话 框 事 件 中 显示 遮盖 层 。 

(3) 为 对 话 框 添加 触发 隐藏 的 单 击 事件 ， 同 时 隐藏 遮盖 层 。 

(4) 为 对 话 框 的 内 容 提 交 按钮 添加 隐藏 对 话 框 和 遮盖 层 功 能 ， 并 在 页 面 中 显示 用 户 输 
入 的 内 容 。 

首先 ， 对 上 一 节 的 对 话 框 中 的 样式 进行 修改 : 

1 ”<div id="btn"> 弹 出 对 话 框 </div> 

2 <p id="result"> 对 话 框 用 户 输 入 内 容 : </p> 

< <div id="showMessage"> 
4 <div id="titlearea"> 
5 <div id="close"></div> 
6 <div id="titles">jQuerys 输入 对 话 框 </div> 
</div> 
8 <div id="content"><input id="userdata" /><input type="button" 

id="tijiao” value=" 确 定 " /></div> 
9 </div> 
10 <div id="background"></div> 


然后 ， 修 改 JavaScript 功能 代码 : 
于 <script type="text/JavaScript"> 
Ed $ (document) .ready (function(){ 
3 $ ("#btn") .click (function(){ // 触 发 输入 对 话 框 
// 显 示 和 遮盖 层 
4 $("#background") .css ("width",$ (window) .width()+"px") 
对 -css ("height",$ (window) .height ()+"px") .show(); 
// 显 示 输入 对 话 框 
6 $("#showMessage") .css("left", ($ (window) .width()-$ 
("#showMessage") -width () ) /2+"px") 
学 .Css ("top", ($ (window) .height ()-$ ("#showMessage"). 
height () ) /2+"px") .show();}); 
// 隐 藏 遮盖 层 和 对 话 杠 
8 S("#close") .click(function()1{ 
9 $("#background") -css("display","none") > 
10 S$("#showMessage") .hide (); 
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]) 
// 隐 藏 遮盖 层 和 对 话 框 ， 在 页 面 上 显示 输入 内 容 


下 2 $("#tijiao") .click (function(){ 

13 $("#background") .css ("display","none"); 

14 $("#showMessage") .hide () : 

15 $("#result") .text($("#result") .text()+$("#userdata") .val ()); 
16 有 

L7 Ds 


18 </script> 


上 述 代码 第 12 一 16 行 是 对 话 框 中 内 容 提交 按钮 的 单 击 事件 ， 在 这 个 事件 中 隐藏 遮盖 
层 ， 隐 藏 对 话 框 ， 并 将 用 户 在 输入 对 话 框 中 输入 的 内 容 在 页 面 中 显示 出 来 ， 效 果 如 图 9.3 
和 图 9.4 所 示 。 


LQuen 对 话 相 “上 确定] 


Ee) 


es | DAWritegoorQs P ~ 


图 9.3 jQuery 输入 对 话 框 图 9.4 jQuery 输入 对 话 框 返回 内 容 


9.4 提示 对 话 框 


本 节 将 介绍 提示 对 话 框 。 提 示 对 话 框 主要 显示 提示 信息 。 它 的 基本 工作 原理 和 9.2 节 
所 介绍 的 模式 对 话 框 类 似 ， 当 用 户 输入 相应 内 容 并 触发 对 话 框 弹出 时 ， 自 动 将 用 户 的 内 容 
携带 进 对 话 框 。 其 中 ， 要 使 用 到 jQuery 函数 ready0、click0、css0、showO、hideO 、attr0 。 

其 功能 实现 如 下 。 

(1) 为 页 面 中 触发 弹出 对 话 框 的 元 素 添加 单 击 事件 , 在 事件 中 触发 对 话 框 所 在 层 显示 ， 
并 定位 对 话 框 的 具体 显示 位 置 ， 将 用 户 输入 内 容 填 入 对 话 框 。 

(2) 在 触发 对 话 框 事件 中 显示 遮盖 层 。 

(3) 为 对 话 框 添 加 触发 隐藏 的 单 击 事件 ， 同 时 隐藏 遮盖 层 。 

首先 ， 对 上 一 节 的 对 话 框 中 的 样式 进行 修改 : 
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1 <div id="btn"> 弹 


出 对 话 框 <br /> 


pd <input type="checkbox" id="public" value="0" name="sss" name= 
"public"/> 公 开 资 料 内 容 

E </div> 

4 <!--<p id="result"> 对 话 框 用 户 输入 内 容 : </p>--> 

7 <div id="showMessage"> 

6 <div id="titlearea"> 

a <div id="close"></div> 

8 <div id="titles">jQuery 提示 对 话 框 </div> 

妆 </div> 

10 <div id="content"><span id="message"> 您 选择 了 </span><input type= 

"button" id="tijiao" value=" 确 定 " /></div> 
11 </div> 


12 <xdiv id="background"></div> 


人 然后， 修改 JavaScript 功能 代码 : 


1 <script type="text/JavaScTript"> 
哆 $ (document) .ready (function(){ 
3 var msg=undefined; 
4 $("#btn") .click (function(){ 
// 弹 出 提示 对 话 框 和 过 盖 层 ， 在 提示 对 话 框 中 显示 用 户 提交 内 容 
5 if($("#public") .attr ("checked")) 
6 msg=" 公 开 资料 内 容 " 
学 else 
8 msg=" 不 公开 资料 内 容 "; 
9 $("#background") .css ("width",$ (window) .width()+"Px") 
10 .css("height",$ (window) .height ()+"px") .show(); 
六 $("#showMessage") .css ("left", ($ (window) .width ()-$ 
("#showMessage") .width())/2+"px") 
和 .Css("top", ($ (window) .height ()-$ ("#showMessage"). 
height () ) /2+"px") .show(); 
区 1 $("#message") .text ($("#message") .text ()+msg); 
1 1); 
15 $ ("#close") .click (function(){ // 隐 藏 对 话 框 和 遮盖 层 
16 $("#background") .css ("display", "none"); 
了 9 $("#showMessage") .hide(); 
18 ]) 7 
19 S("#tijiao") .click (function(){ // 隐 藏 对 话 框 和 遮盖 层 
20 $("#background") .css("display"，"none") 7 
21 $ ("#showMessage") .hide(); 
这 冯 msg=""; 
23 $ ("#message") .text ("您 选择 了 ") ; 
24 //$ ("#result") .text ($ ("#result") .text ()+$ ("#userdata") . 
val ()); 
25 D> 
26 }); 


/scrint> 


上 述 代 码 第 5~8 行 提取 了 用 户 在 页 面 上 的 选择 内 容 ， 并 记录 下 来 。 第 13 行将 用 户 的 


选择 内 容 填 入 对 话 框 ,提示 月 


日 户 操作 。 第 22、23 行 ， 当 对 话 框 隐藏 的 时 候 将 其 内 容 进 行 


二 
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新 设置 ， 以 便 下 次 使 用 ， 效 果 如 图 9.5 和 图 9.6 所 示 。 


x | -| Ta 人 
弹 中 对 话 框 
回 公开 资料 内 容 


图 9.5 用 户 输入 选择 内 容 图 9.6 提示 对 话 框 


9.5 ”确认 对 话 框 


前 面 讨 论 了 输入 对 话 框 和 信息 提示 对 话 框 。 下 面 来 看 确认 对 话 框 如 何 实现 。 确 认 对 话 
框 和 前 两 节 介绍 的 对 话 框 的 不 同 在 于 ， 它 是 一 种 选择 性 操作 对 话 框 。 确 认 对 话 框 为 用 户 提 
供 两 种 选择 结果 ， 并 且 用 户 的 选择 会 直接 影响 页 面 上 的 操作 。 

它 的 实现 原理 是 : 从 页 面 提取 用 户 操作 内 容 在 对 话 框 显示 时 ， 提 示 用 户 是 否 确 认 自 己 
的 操作 。 当 用 户 对 对 话 框 做 出 确认 或 者 否定 操作 时 ， 又 返回 来 直接 修改 页 面 内 容 。 其 中 ， 
使 用 到 了 jQuery 函数 ready0、click0、cssO0、showO、hideO0、attrO。 

其 功能 实现 如 下 。 

(1) 为 页 面 中 触发 弹出 对 话 框 的 元 素 添加 单 击 事件 , 在 事件 中 触发 对 话 框 所 在 层 显示 ， 
并 定位 对 话 框 的 具体 显示 位 置 ， 将 用 户 输入 内 容 填 入 对 话 框 。 

(2) 在 触发 对 话 框 事件 中 显示 遮盖 层 。 

(3) 为 对 话 框 的 确认 按钮 添加 触发 隐藏 的 单 击 事件 ， 同 时 隐藏 迹 盖 层 。 

(4) 为 对 话 框 的 取消 按钮 添加 触发 隐藏 的 单 击 事 件 ， 同 时 隐藏 遮盖 层 。 如 果 用 户 色 选 
了 页 面 内 容 ， 则 取消 勾 选 操作 。 

首先 ， 对 上 一 节 的 对 话 框 中 的 样式 进行 修改 : 

1 ”<xqdiv id="btn"> 弹 出 对 话 框 <br /> 

<input type="checkbox" id="public" value="0" name="sss" name= 

"public"/> 公 开 资 料 内 容 

</div> 

4 <!--<p id="result"> 对 话 框 用 户 输入 内 容 : </p>--> 

全 <div id="showMessage"> 

6 <div id="titlearea"> 
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op 


10 


不 
2 
13 


<div id="close"></div> 


<div id="titles">jQuery 提示 对 话 框 </div> 
</div> 
<div id="content"><span id="message"> 您 选择 了 </span><input type= 
"button" id="tijiao” value=" 确 定 ” /> 
<input type="button" id="cancel"” value=" 取 消 " /> 
</div> 
</div> 


14 <div id="background"></div> 


然后 修改 JavaScript 功能 代码 : 


1 
区 
3 
4 
5 
6 
了 


<script type="text/JavaScript"> 
$ (document) .ready (function(){ 


var msg=undefined; 
/*$("#btn") .click (function(){ 
$("#background") .css ("width",$ (window) .width()+"Px") 
.css("height",$ (window) .height ()+"px") .show(); 
$("#showMessage") .css ("left", ($ (window) .width ()-$ 
("#showMessage") .width())/2+"px") 
.Css ("top", ($ (window) .height ()-$ ("#showMessage"). 
height ())/2+"px") .show();}); */ 
$("#btn") .click (function(){ 
// 弹 出 提示 对 话 框 和 遮盖 层 ， 在 提示 对 话 框 中 显示 用 户 提 交 内 容 
if($("#public") .attr ("checked")) 
msg=" 公 开 资 料 内 容 "; 
else 
msg=" 不 公开 资料 内 容 "; 
$("#background") .css ("width",$ (window) .width ()+"px") 
.css ("height",$ (window) .height ()+"px") .show(); 
$("#showMessage") .css ("left", ($ (window) .width()-$ 
("#showMessage") .width () ) /2+"px") 
.Css("top", ($ (window) .height ()-$ ("#showMessage"). 
height ())/2+"px") .show(); 
$("#message") .text ($ ("#message") .text () +msg); 
}) 7 
$("#close") .click(function(){ // 隐 藏 对 话 框 和 遮盖 层 
$("#background") .css ("display", "none"); 
$("#showMessage") .hide(); 
1D); 
$("#tijiao") .click (function(){ 

// 隐 藏 对 话 框 和 遮盖 层 ， 并 确定 用 户 选 择 
$("#background") .css ("display", "none"); 
$("#showMessage") .hide(); 
msg=""; 
$ ("#message") .text ("您 选择 了 "); 

//$ ("#result") .text ($ ("#result") .text ()+$ ("#userdata") . 
val()); 

Ds; 

$("#cancel") .click(function(){// 隐 藏 对 话 框 和 遮盖 层 , 并 取消 用 户 选择 
$("#background") .css ("display","none"); 
$("#showMessage") .hide(); 
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34 msg=""; 

35 $("#message") .text ("您 选择 了 ") ; 

36 if($("#public") .attr ("checked")) 

37 $("#public") .attr('checked' ,false); 
38 ]) 7 

39 DD); 


40 </script> 


上 述 代 码 的 基本 内 容 和 9.4 节 相 同 ， 第 31~38 行 是 确认 对 话 框 的 取消 按钮 功能 ， 第 
36、37 行 判 断 用 户 是 否 勾 选 了 相应 内 容 ， 如 果 勾 选 了 ， 则 取消 勾 选 。 效 果 如 图 9.7 所 示 。 


es 
CIO weeoon0r 2- cxjs 
X 里 -| 加 DebugBar 专 -| 已 | 画 -| Z -| : 


一 
rx 


EE 


图 9.7 确认 对 话 框 
从 图 9.7 中 可 以 看 到 ， 当 色 选 复 选 框 后 弹出 确认 对 话 框 。 但 是 ， 如 果 尝 试 单 击 “ 取 消 ” 
按钮 ， 对 话 框 会 消失 ， 同 时 复 选 框 又 处 于 未 选中 状态 。 如 果 单 击 “ 确 定 ” 按 钮 ， 则 只 是 对 
话 框 消失 ， 并 不 影响 复 选 框 。 


9.6 对话 框 插件 


对 话 框 插件 是 一 种 在 网 页 页 面 上 模拟 跳出 模式 或 者 非 模式 对 话 框 的 插件 。 它 可 以 帮助 
我 们 完成 更 多 的 用 户 交互 操作 ， 并 节省 开发 自 定义 对 话 框 的 时 间 。 本 节 介 绍 两 个 对 话 框 插 
件 。 它 们 的 基本 功能 和 前 面 儿 节 介 绍 的 自 定义 对 话 框 类 似 。 


9.6.1 jqModal 对 话 框 插件 
jqModal 对 话 框 插件 帮助 我 们 在 浏览 器 中 显示 告示 、 对 话 框 、 模 式 窗口 。 它 富有 弹性 ， 
小 巧 , 就 如 同 “ 瑞 士 军刀 ”一 样 。 它 的 英文 介绍 网 址 为 http://dev.iceburg.netjquery/jqModal/。 
jqModal 特点 如 下 。 
(1) 设计 友好 ， 不 用 复杂 的 操作 。 
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(2) 翻译 友好 ， 不 用 硬 编码 英文 字符 串 。 
(3) 开发 友好 ， 利 用 回调 函数 实现 多 功能 。 
(4) 支持 远程 加 载 内 容 。 
(5) 多 模块 支持 。 
jqModal 基本 使 用 步骤 如 下 。 
(1) 添加 对 话 框 容器 。 
(2) 初始 化 对 话 框 。 
(3) 触发 对 话 框 。 
jqModal 中 使 用 的 函数 如 表 9.1 所 示 。 
表 9.1 jqModal 函 数 说 明 
函数 例 子 说 


$(#dialog’)jqmO): jqModal 对 话 框 的 初始 化 函数 ， 接 


$(".dialogs').jqm( {ajax:'@href ,modal:true}); 收 一 组 参数 对 象 
jqmShow S$('.dialogs")jqmShowO: 显示 对 话 框 
jqmHide $(".dialogs').jqmHide(O); 隐藏 对 话 框 


jqmAddTrigger | $('.dialogs")jqmAddTrigger($(#openDialogs a')); 
DOM 元 素 


jqmAddClose $('.dialogs").jqmAddClose($('#hideDialogs a')); 


单 击 触发 对 话 框 的 页 面 元 素 ， 可 以 
为 字符 串 形 式 的 jQuery 选择 器 , 也 
可 以 为 jQuery 对 象 ， 或 者 一 


单 击 关 闭 对 话 框 的 页 面 元 素 ， 可 以 
为 字符 串 形式 的 jQuery 选择 器 , 也 
可 以 为 jQuery 对 象 ， 或 者 一 


DOM 元 素 
jqModal 中 使 用 到 的 参数 说 明 如 表 9.2 所 示 。 
表 9.2 jqModal 的 参数 说 明 
参数 数据 类 型 默 说 明 
overlay 整 型 50 履 盖 层 的 透明 度 ， 按 照 百 分 比 取 值 
overlayClass | 字符 串 "jqmOverlay | 履 盖 层 的 CSS 样式 类 
closeClass 字符 串 或 者 为 假 "jqmClose' 单 击 关闭 对 话 框 元 素 的 CSS 样式 类 
单 击 触发 对 话 框 的 页 面 元 素 ， 可 以 为 字符 
trigger 字符 串 、 对 象 、 或 者 为 假 串 形 式 的 jQuery 选择 器 ， 或 者 一 个 DOM 
元 素 ， 或 者 不 使 用 触发 元 素 
ajax 字符 串 或 者 假 指定 需要 加 载 远 程 内 容 的 地 址 
ajaxText 字符 串 Ajax 文本 内 容 
Ajax 内 容 加 载 目标 元 素 ， 可 以 为 字符 串 形 
target 字符 串 或 者 假 式 的 jQuery 选择 器 , 或 者 一 个 DOM 元 素 ， 
或 者 Ajax 将 重 写 整 个 对 话 框 内 容 
modal 布尔 型 模式 对 话 框 参 数 
toTop 布尔 型 将 对 话 框 置 于 所 有 其 他 元 素 的 上 层 


下 面 通过 几 个 示例 来 了 解 这 个 插件 的 使 用 方法 ， 这 里 不 涉及 Ajax 内 容 。 


第 2 篇 jQuery 实战 开发 与 应 用 


1. 默认 对 话 框 形式 
这 种 对 话 框 的 使 用 完全 套用 了 所 有 属性 为 默认 值 的 情况 。 首 先 ， 需 要 建立 静态 页 面 : 


wwwN 


5 


16 
EE 


<a href="#" class="jqModal">view</a> 
<div class="jqmWindow" id="dialog"> 
<a href="#" class="jqmClose">Close</a> 
<hr> 
<em>READ ME</em> --> 
This isa "vanillaplain" jqModal window. Behavior and appeareance extend 
far beyond this. 
The demonstrations on this page will show off a few possibilites. 
I recommend walking 
through each one to get an understanding of jqModal <em>before</em> using it. 
<br /><br /> 
You can view the sourcecode of examples by clicking the JavaScript, 
Css, and HTML tabs. 
Be sure to checkout the <a href="README">documentation</a> too! 
<br /><br /> 
<em>NOTE</em>; You can close windows by clicking the tinted background 
known as the "overlay". 
Clicking the overlay will have no effect if the "modal" parameter is 
passed, or if the 
overlay is disabled. 
</div> 


上 面 的 HTML 代码 第 1、2 行 是 触发 对 话 框 的 页 面 元 素 ， 第 3 一 17 行 是 对 话 框 的 内 容 
部 分 。 其 中 “jqmWindow ”为 对 话 框 的 容器 层 , 第 4 行 是 对 话 框 的 关闭 元 素 。 然 后 在 <head> 
中 加 入 CSS 样式 设 定 : 


2 
3 
4 
5 
6 
. 
8 


| 
10 
EU 
3 
14 
5 
16 
全 尖 
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<style type="text/css"> 
.jqmWindow { 
display: none; 
position: fixed; 
tops 17% 
left: 50%; 
margin-left: -300px; 
width: 600px; 
background-color: #EEE; 
COLOr: #3337 
border: 1lpx solid black; 
padding: 12px; 
} 
-jqmOverlay { background-color: #000; } 
* html .jqmWindow { 
position: absolute; 
top: expression( (document .documentElement.scrollTop || 
document .body.scrollTop) + Math.round(17 * (document. 
documentElement .offse-tHeight || document.body. 
clientHeight) / 100) + "px'")7 
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18 > 
19 </style> 


第 2 一 13 行 ， 第 15 一 18 行 是 对 话 框 样式 的 设 定 ， 第 14 行 是 绪 盖 层 的 样式 。 最 后 引入 
jQuery 库 文件 及 jqModal 插件 文件 ， 并 加 入 JavaScript 代码 : 


中 <script type="text/JavaScript" src="../../jslib/jquery.js"></script> 
2 <script type="text/JavaScript" src="JS/jqModal.js"></script> 

3 <script type="text/JavaScript"> 

4 $().ready (function() { 

号 $ ('#dialog') .jqm(); 
6 RN 
DT </script> 


代码 相对 简单 ， 没 有 任何 参数 设 定 ， 效 果 如 图 9.8 所 示 。 


READ ME --> This sa "vanila plain" jqModal window. Behavior and appeareance extend far 
beyond this The demonstrations on this page will show off a few possibilites I recommend walking 
through each one to get an understanding of jqModal before using it 


et 人 生息 和 CSS, and HIML tabs. Be 
Sure to checkout the documentation tool 


NOTE: You can close windows by clicking the tinted background known as the “overlay”. Clicking 
the overlay will have no effect ¥f the "modal" parameter is passed, or ¥f the overlay is disabled 


图 9.8 jqModal 默认 对 话 框 
2. 可 拖 动 的 带 特 殊 背 景 的 模式 对 话 框 


这 种 对 话 框 使 用 了 jqModal 的 一 部 分 属性 ， 并 加 入 了 对 话 框 的 拖 动 功能 。 
首先 ， 建 立 静 态 页 面 。 静 态 页 面 及 CSS 样式 与 上 面 的 例子 基本 相同 ， 只 是 加 入 了 若干 
样式 设 定 ， 具 体内 容 请 参考 光盘 内 容 。 下 面 看 一 下 具体 JavaScript 功能 代码 。 


计 <script type="text/JavaScript"> 

这 $().ready (function() { 

3 $ ('#ex3a') .jqm({ 

4 trigger: '#ex3aTrigger', 

5 overlay: 30, /* 0-100 (int) : 0 is off/transparent, 100 is opaque */ 

6 overlayClass: 'whiteOverlay'}) 

Wl -jgqDrag('.jqDrag'); /* make dialog draggable, assign handle 
to title */ 

8 $ ("input.jqmdx') 


9 .hoverl( 
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10 function(){ $(this) .addClass('jqmdXFocus'); }, 

中 function(){ $(this) .removeClass('jqmdXFocus'); }) 

TI2 .focus( 

1 function(){ this.hideFocus=true; $ (this) .addClass 
('jqmdxFocus'); }) 

14 -blur( 

5 function(){ $(this) .removeClass('jqmdXFocus'); }); 

16 2 


TD </script> 


上 述 代码 中 第 3 一 7 行 是 jqModal 插件 的 基本 参数 配置 , 第 4 行 表示 设 定 触发 元 素 , 第 
5 行 设 定 覆 盖 层 的 透明 度 ， 第 6 行 是 设 定 履 盖 层 的 样式 类 ， 第 7 a 
式 ; 第 8 一 15 行 是 对 话 框 关闭 按钮 的 各 种 事件 的 样式 设 定 ， 包 括 鼠 标 悬 停 、 得 到 焦点 、 
去 焦点 ， 效 果 如 图 9.9 和 图 9.10 所 示 。 


ee Per Pa 


Styled windows or dialogs are easy! 


This particular theme was done for -- 
feel free to borrow the styling, or use it as a 
reference when creating your own. CSS and 
Markup is available under the HTML + CSS 
tabs of example 3a. 


图 9.9 可 拖 动 对 话 杠 


Styled windows or dialogs are easyl 


This particular theme was done for poMMo -- 
feel free to borrow the styling, or use it as a 
reference when creating your own. CSS and 
Markup is available under the HTML + CSS 
tabs of example 3a. 


图 9.10 对话 框 拖 动 效 果 
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3. jqModal 的 显示 与 隐藏 

这 个 例子 使 用 了 插件 的 显示 与 隐藏 方法 控制 弹出 对 话 框 屋 ， 同 时 使 用 了 添加 触发 对 话 
框 的 元 素 和 关闭 对 话 框 的 元 素 的 方法 。 静态 页 面 和 CSS 代码 请 参考 光盘 内 容 。 下 面 主 要 讨 
论 一 下 JavaScript 的 功能 代码 。 


hs $().ready(function() { 

2 Var show = $('#ex5show'); 

3 var hide = $('#ex5hide'); 

4 $('div.square') 

5 -jqm({overlay: 0, trigger: false}) 
6 -jgqDrag () // 可 拖 动 操作 
.jqmAddTrigger (show) 

8 .jqmAddClose (hide) 

9 $('#exS5multi') .click(function() { 
10 $('div.square:even') .jqmShow() > 

ll $('div.square:odd') .jqmHide(); 

| return false; 

13 后 

jE 


上 述 代 码 中 第 4、5 行进 行 插件 初始 化 属性 设 定 ， 履 盖 层 透明 度 为 0， 不 使 用 默认 触发 
功能 。 第 7 行 添加 触发 对 话 框 的 页 面 元 素 。 第 8 行 添加 触发 关闭 对 话 框 的 页 面 元 素 。 第 9 一 
13 行 设 定 了 弹出 层 的 显示 效果 ， 奇 数 层 隐藏 ， 偶 数 层 显示 。 效 果 如 图 9.11 和 图 9.12 所 示 。 

这 个 插件 的 功能 较 多 ， 这 里 挑选 了 上 面 三 种 基本 使 用 方式 ， 其 他 功能 可 以 参考 光盘 内 
容 或 者 去 插件 的 官网 查看 范例 。 


Co | 
人 
电 DAWriteBoolNiQuerySite\plugins\dialogWqamod 二 40 -| 4 | XP Bs P 
实 收 BE | 辐 测 aqModal 
| THF SIIT VIEN (hrde alT] TIEN USFOWFFTIE ome] 二 | 


-上 加 | 


图 9.11 触发 显示 所 有 弹出 层 
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厦 测 壤 qModal - Windows intemet Explorer 


€e) DAWriteBook\QuerySite\plugins\dialog\iqmod 埠 40 ~ 好 |X| 


寅 收 基 夫 古洞 者 qModal 
TEN (Shon aTIJT YIER (hide aTIJ viey (shomhide some] .-. 如 


图 9.12 显示 部 分 弹出 层 


9.6.2 jQuery.UI.Dialog 对 话 框 插件 


jQuery.ULDialog 对 话 框 插件 是 jQuery 官方 网 站 提供 的 一 整套 UI 插件 中 的 一 部 分 。 它 
的 主要 功能 是 利用 jQuery 生成 动态 浮动 对 话 框 。 这 个 插件 需要 以 下 jQuery 文件 的 支持 : 
jquery.ui.core.js、jquery.ui.widget.js、jquery.ui.position.js、jquery.ui.mouse.js (可 选 ， 当 需要 
通过 鼠标 拖 动 对 话 框 或 者 改变 对 话 框 的 大 小 时 使 用 ) 、jquery.ui.draggable.js (可 选 )、 
Jquery.ui.resizable.js。 
这 个 插件 有 一 些 相关 属性 ， 可 以 设置 对 话 框 的 样式 和 行为 ， 如 表 9.3 所 示 。 
表 9.3 ”Dialog 属性 说 明 


属 性 说 明 
disable 对 话 框 的 启动 选项 ， 可 以 在 对 话 框 初始 化 时 加 载 
ee 当 对 话 框 被 调用 的 时 候 自动 打开 。 如 果 打 开 失 败 ， 则 对 
话 框 总 是 处 于 隐藏 状态 。dialog("open") 表 示 调 用 对 话 框 
Dei 指定 显示 按钮 选择 。 这 个 属性 的 键 为 按钮 的 文本 ， 值 为 
按钮 的 单 击 事件 回调 函数 
指定 显示 按钮 的 选择 。 数 组 中 的 每 个 元 素 都 必须 针对 
buttons in ty 
按钮 定义 
closeOnEscape 设 定 对 话 框 是 否 在 得 到 焦点 时 可 以 通过 Esc 键 关闭 
closeText 指定 关闭 按钮 的 文本 内 容 
dialogClass 指定 初始 化 对 话 框 的 对 话 框 类 
draggable 设 定 对 话 框 是 否 可 以 拖 动 
height 对 话 框 的 高 度 ， 单 位 为 像素 
hide 当 对 话 框 关闭 后 的 效果 
maxHeight 对 话 框 可 调整 的 最 大 高 度 值 ， 单 位 为 像素 
maxWidth 对 话 框 可 调整 的 最 大 宽度 值 ， 单 位 为 像素 
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属 性 类 型 默认 值 说 明 
minHeight 数字 150 对 话 框 可 调整 的 最 小 高 度 值 ， 单 位 为 像素 
minWidth 数字 150 对 话 框 可 调整 的 最 小 宽度 值 ， 单 位 为 像素 
modal 布尔 false 模式 对 话 框 选项 
指定 对 话 框 显示 的 位 置 1， 单 一 字符 串 表 示 位 置 'center'， 
position 字符 串 ， 数 组 | 'center "eft', right, 'top', 'bottom'; 2， 两 个 数字 组 合 数组 ， 单 位 为 
像素 ， 3， 两 个 字符 串 组 合 的 数组 
resizable 布尔 true 对 话 框 是 否 可 调整 大 小 选项 
show 字符 串 ， 对 象 | null 当 对 话 框 打开 时 的 效果 
指定 当 对 话 框 获得 焦点 时 是 否 可 以 停靠 在 多 个 对 话 框 
stack 布尔 true i 
的 最 上 层 
title 字符 串 对 话 框 的 标题 属性 
width 数字 300 对 话 框 的 宽度 ， 单 位 为 像素 
ZIndex 整 型 1000 对 话 框 的 初始 层 位 置 


与 这 个 对 话 框 相关 的 还 有 事件 选项 ， 如 表 9.4 所 示 。 
表 9.4 ”Dialog 事 件 说 明 


create dialogcreate 对 话 框 创建 时 触发 


事件 
beforeClose 对 
open 对 
focus 对 
dragStart 
drag 
dragStop 


resize dialogresize 


话 框 尝试 关闭 时 触发 ， 如 果 关 闭 失败 ， 将 阻止 对 话 框 关闭 
话 框 被 打开 后 触发 

话 框 得 到 焦点 时 触发 

话 框 开始 被 拖 动 时 触发 

话 框 被 拖 动 时 触发 

话 框 停 止 拖 动 时 触发 

话 框 开 始 改变 大 小 时 触发 

话 框 改变 大 小 时 触发 

话 框 停止 改变 大 小 时 触发 


对 
对 
对 
resizeStart 对 
对 
对 
对 


TesizeStop | dialogresizestop 
close dialogclose 


有 一 些 行为 可 以 控制 该 对 话 框 和 


= 


话 框 关闭 后 触发 


4 相关 操作 ， 如 表 9.5 所 示 。 


表 9.5 Dialog 行为 说 明 


行 为 表 示 说 明 
destroy .dialog( "destroy" ) 移 除 所 有 对 话 框 的 功能 
disable .dialog( "disable" ) 屏蔽 对 话 杠 
enable .dialog( "disable" ) 使 能 对 话 框 
option .dialog( "option" , optionName , [value] ) 获取 或 设置 对 话 框 参数 选项 
ne 让 多 不 证 和 天 
widget .dialog( "widget" ) 返回 对 话 框 元 素 
close .dialog( "close" ) 关闭 对 话 框 
isOpen .dialog( "isOpen" ) 如 果 对 话 框 已 经 关闭 则 返回 真 
moveToTop .dialog( "moveToTop" ) 移动 对 话 框 到 页 面 最 上 层 
open .dialog( "open" ) 打开 对 话 框 
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下 面 通过 示例 来 介绍 这 个 插件 的 使 用 方法 。 
1. 默认 对 话 框 


这 个 示例 使 用 Dialog 的 默认 参数 形式 ， 只 调用 了 Dialog 插件 的 初始 化 函数 。 其 中 ， 
HTML 代码 和 CSS 代码 请 参考 光盘 内 容 。JavaScript 功能 代码 如 下 : 


1 <script type="text/JavaScript"> 
be $(function() { 

入 $( "#dialog" ) .dialog(); 
! ]) 7 

5 </script> 


第 3 行 中 的 .dialog0 就 是 Dialog 插件 的 初始 化 函数 。 它 使 用 了 Dialog 的 默认 样式 ， 并 
在 页 面 加 载 后 自动 显示 对 话 框 ， 效 果 如 图 9.13 所 示 。 


Sed vel diam id Ubero utrum conva;. Donec souet eo vel magna. Phaseds rhoncus {faucibus ante. Etiam bibendum, enim faucibua atiuet rhoncus, arcu fats 
Mtricies neque, Sit amet auctor elit eros a lects. 


text input 
国 [ Basic dialog x 


) rad 


Select | 了 This is the default dialog which is useful for 
displaying information. The dialog window can be 
moved resized and closed with the x icon. 


textarea 


4 


The basic dialog window is an overlay positioned within the viewport and is protected from page content (like select elements) 


shining through with an iframe. It has a title bar and a content area, and can be moved, resized and closed with the x icon by 
default. 


图 9.13 Dialog 插件 默认 样式 
动画 效果 对 话 框 


这 个 示例 使 用 了 关于 Dialog 打开 与 关闭 的 属性 设置 和 相关 方法 调用 , 实现 Dialog 动画 
效果 打开 和 关闭 。 其 中 ，HTML 代码 和 CSS 代码 请 参考 光盘 内 容 。JavaScript 功能 代码 
如 下 : 


<scripte> 

之 //increase the default animation speed to exaggerate the effect 
3 $.fx.speeds. default = 1000; 

4 $ (function() { 

5 $( "#dialog" ) .dialog({ 

6 autoOpen: false, // 不 自动 打开 对 话 框 

可 show: "blind", // 显 示 样 式 设 定 

8 hide: "explode" // 隐 藏 样式 设 定 
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9 1D); 

10 $( "#opener™" ).click(function() { 

于 下 $( "#dialog" ) -dialog( "open" ); 
了 2 return false; 

13 }s 

14 Ds; 


Esc 


上 述 代码 中 第 6 行 设 定 对 话 框 不 自动 打开 ， 第 7 行 指定 对 话 框 打开 时 的 动画 效果 为 


blind, 这 个 动画 效果 在 


jQuery.effects.blindjs 中 定义 。 第 8 行 指定 对 话 框 关闭 时 的 动画 效果 


为 explode， 这 个 动画 效果 在 jQuery.effects. explodejs 中 定义 。 第 10 一 13 行 设 定 了 打开 按 
钮 的 单 击 事件 ， 第 11 行使 用 了 Dialog 的 打开 行为 ， 具 体 效 果 如 图 9.14 和 图 9.15 所 示 。 当 
单 击 Open Dialog 按钮 时 ， 对 话 框 动画 渐 入 打开 ， 当 关闭 对 话 框 时 ， 对 话 框 分 解 成 6 个 小 


部 分 逐渐 消失 。 


大 jQuery ulpialog - 


TT + |x|Pae pr 


[opmoaoa ] 


Dialogs may be animated by specifying an effect for the show and/or hide properties. You must indude the individual effects 
file for any effects you would like tauce 


Basic dialog 其 


is an animated dialog which is useful for displaying 
information, Te dialog window can be moved resized 
and closed with the ‘x icor 


图 9.14 对话 框 打 开 


9 -Animation - Windows Interet Explorer 


GO [Eoweeoaeo mi D eo “| |x| 


食 % 醒 赤 | 引 | -| 条 auey U. x 逢 jauey ULD- 着 jQuery ulD- 荐 jauey U1D- | 


Dialogs may be a 


file for any effec 


Basic dialog ,an effect fort 


Tie i en enim 


| informaton. The a 
| and closed with th 


图 9.15 对 话 框 关 闭 动态 过 程 
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3. 模式 对 话 框 


前 面 两 个 示例 所 看 到 的 对 话 框 都 是 非 模式 对 话 框 ， 也 就 是 当 对 话 框 出 现时 ， 对 话 框 后 
面 页 面 上 的 内 容 还 是 可 以 操作 的 。 下面 介 绍 如何 通 过 Dialog 创建 模式 对 话 框 。 其中, HTML 
代码 和 CSS 代码 请 参考 光盘 内 容 。JavaScript 功能 代码 如 下 : 


1 <script> 

也 $(function() { 

3 // 移 除 所 有 对 话 框 功能 

4 $( "#dialog:ui-dialog" ) .dialog( "destroy" ); 
5 $( "#dialog-modal" ) .dialog({ 

6 height: 140， // 设 定 对话 框 的 高 

7 modal: true // 创 建 模式 对 话 框 

8 朋友 

9 

和 


1D); 
0 </script> 


上 述 代 码 第 7 行使 用 了 Dialog 插件 的 模式 对 话 框 属性 “modal”， 并 将 其 设 为 真 。 当 
页 面 加 载 完 成 后 ， 自 动 打 开 一 个 模式 对 话 框 ， 效 果 如 图 9.16 所 示 。 


taxt nput 
ewesime 


select[e 


exrarea 


A modal dalog prevents the user from interacting with the resLof he page untlIL Is closed. | 


图 9.16 模式 对 话 框 


4. 模式 确认 对 话 框 


这 个 对 话 框 是 将 原 有 对 话 框 功能 取消 掉 ， 利用 Dialog 属性 重新 创建 对 话 框 功能 ， 以 实 
现 确 认 对 话 框 。 其 中 ，HTML 代码 和 CSS 代码 请 参考 光盘 内 容 。JavaScript 功能 代码 如 下 : 
<ocript> 
FE $ (function() { 
3 //a workaround for a flaw in the demo system (http://dev.jqueryui . 
com/ticket/4375), ignore! 
$( "#dialog:ui-dialog" ) .dialog( "destroy™ ); 
5 $( "#dialog-confirm" ) .dialog({ 


“216° 


第 9 章 设计 对 话 框 


6 resizable: false， // 不 可 调整 对 话 框 大 小 

了 7 height:140, // 对 话 框 高 度 

8 modal: true, // 模 式 对 话 框 

9 buttons: { 

10 "Delete all items": function() { 

5 $( this ) .dialog( "close" );  /// 设 定 对 话 框 功能 按钮 
12 }, 

13 Cancel: function() { 

14 $( this ) .dialog( "close" );  // 对 话 框 “取消 ”按钮 
15 

16 

尘 肖 a 

Bs 


9 “</script> 

上 述 代 码 第 4 行销 毁 原 有 对 话 框 的 所 有 默认 属性 。 第 6 行 设 定 对 话 框 禁 止 调整 大 小 。 
第 7 行 设 定 对 话 框 高 度 为 140 像素 。 第 8 行 设 定 模式 对 话 框 。 第 9 一 16 行 添加 按钮 功能 。 
第 10 行 指 定 文本 为 “Delete all items” 的 按钮 的 关闭 功能 。 第 11 行 指定 了 对 话 框 的 关闭 行 


Sed wel dom id oero Dorec sacet wo val magra. Prasedis rhoncaa faucibs rte Etiam glbenaun enim faocits aquet rhoncua arc 
Han varicaes nea. at amet auctor et ero a ers, 


text input | 
EE Empty the recycle bin? x | 
ee 四 

select [mw A These tems will be permanently deleted and 
| 


cannot be recovered. Are you sure? 
texcarea 


| Delete all tems | Cancel 


Confirm an action that may be destructive or important. Set the modal option to true, and specify primary and secondary | 
user actions with the buttons option. | 


加 » 


图 9.17 确认 模式 对 话 框 


5. 模式 表单 对 话 框 

这 个 对 话 框 是 将 原 有 对 话 框 功能 取消 掉 , 利用 Dialog 属性 重新 创建 对 话 框 功能 ， 以 实 
现 用 户 输入 表单 对 话 框 。 其 中 ，HTML 代码 和 CSS 代码 请 参考 光盘 内 容 。JavaScript 功能 
代码 如 下 : 


$(function() { 

2 // 移 除 所 有 对 话 框 功能 

3 $( "#dialog:ui-dialog" ) .dialog( "destroy™" ); 
4 


ms 
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“ls 


var name 


email 


= $( "#name™” ), 


= $( "#email™" ), 


password = $( "#password™ ), 
allFields = $( [] ).add( name ).add( email ) .add( password )， 


tips 


= $( ".validateTips" ); 


function updateTips(t)i 


} 


tips 


.text( 七 ) 
-addClass( "ui-state-highlight" ); 
setTimeout (function() { 


tips.removeClass( "ui-state-highlight", 1500 ); 
po S00 Ys 


function checkLength( o, n, min, max ) { 


} 


if ( o.val().length > max || o.vall().length < min ) { 


oO 


-addClass( "ui-state-error" ); 


updateTips( "Length of " + n+ " must be between "十 


min+" and "+ max+ "." ); 


return false; 


} else { 


return true; 


function checkRegexp( o, regexp, n ) 


a 了 
[e] 


{ 
!( regexp.test( o.val() ) ) ) { 
je 


.addClass( "ui-state-error" 


updateTips( n ); 


return false; 


} else { 
return true; 


$( "#dialog-form" ).dialog({ 
autoopen: false, 
height: 300, 


width 
modal 


: 350, 
ErUe 


buttons: { 
"Create an account": function() { // 实 现 表单 信息 添加 功能 按钮 


var bValid = true; 

allFields.removeClass( "ui-state-error" ); 

bValid = bValid && checkLength ( name, "username", 3, 16 ) 
bValid = bValid && checkLength( email, "email", 6, 80 ); 
bvValid = bValid && checkLength( password, "password", 5, 16 ); 
bValid=bValid sg checkRegexp ( name, /^[a-z] ([0-9a-z ]) 
+$/i, "Username may consist of a-z, 0-9, underscores, 
begin with a letter.™" ); 

//From jquery.validate.js (by joern), contributed by Scott 
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Gonzalez: http://projects.scottsplayground.com/email 
address validation/ 

bValid = bValid && checkRegexp( email, /^((([a-z] 
1N\dal [NSS& \*#\+\-\/=M2NM* {NI}*]1INa00A0-\uD7EE 
\uF900-\uFDCF\LFDFO-\uFFEF])+(\. ([a-z] |I\dl[!#\$%&'\ 
*\+\—-\/=\2\~ ~{\1}~]1[\u00A0-\uD7FF\uF900-\uFDCF\UFDFO— 
\uFFEF])+)*) | ((\x22) ((((\x20|\x09)*(\x0d\zx0a))? (\x201 
(([\x01-\x08\x0b\x0c\x0e-\x1lf\x7f] |\x21|\x09)+)?[\x23- 
\x5b] | [\x5d-\x7e] | [\u00A0-\uD7FF\uF900-\uFDCF\UuFDFO-\ 
UFFEF]) | (\\([\x01-\x09\x0b\x0c\x0d-\x7f] | [\u00A0-\uD7FF\ 
uF900-\uFDCF\uFDFO-—\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))? 
(\x20|\x09)+)? (\x22)))@((([a-z]1l\dl [\u00A0-\uD7FF\ 
uF900-\uFDCF\uFDFO0-\uFFEF]) | (([a-z]|\dl [\u00A0-\uD7FF\ 
uF900-\uFDCF\uFDFO-\uFFEF]) ([a-z] I\d|l-I\.|_I~Il[\u00A0- 
\uD7TFF\uF900-\uFDCF\uFDFO-\uFFEF])*([a-z] |\dl [\u00AO0— 
\uDTFF\uF900-\uFDCF\UFDFO-\uFFEF])))\.)+(([a-z] | [\u00AO0-— 
\uDTFF\uF900-\uFDCF\uFDFO-\uFFEF])|(([a-z]|[\u00AO0- 
\uDTFF\uF900-\uFDCF\uFDFO-\uFFEF]) ([a-z] |\dl-I\.|_1I~| 
[\u00AO0-\uD7FF\uF900-\uFDCF\uFDFO-\uFFEF])*([a-z]| 
[\u00AO0-\uD7FF\uF900-\uFDCF\uUFDFO0-\uFFEF])))\.?$/i, 
"eg. ui@jquery.com" ); 


50 bValid = bValid && checkRegexp( password, /^([0-9a-zA- 
2Z])+$/, "Password field only allow : a-z 0-9" ); 

51 if ( bvValid ) 

本 可 $( "#users tbody" ) .append( "<tr>" + 

53 "<td>" + name.val() + "</td>" + 

54 vetads + omaille val() tM </Ed>e 

S55 "<td>" + password.val() + "</td>" + 

56 PSHE 

57 $( this ) .dialog( "close" ); 

58 } 

59 }, 

60 Cancel: function() { 

61 $( this ) .dialog( "close" ); 

62 } 

63 }, 

64 close: function() { 

65 allFields.val( "" ).removeClass( "ui-state-error" ); 

66 } 

67 | 

68 $( "#create-user" ) 

69 -button () 

70 Click(funetion() 六 

71 $( "#dialog-form" ).dialog( "open™ ); 

了 2 DD); 

13 0 Hs 


TA </Ascript> 
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上 述 代码 第 3 行 取消 对 话 框 原 有 功能 。 第 5~9 行 获取 对 话 框 表单 元 素 对 象 及 验证 提 
示 信 息 显 示 对 象 。 第 10 一 17 行 根据 验证 的 错误 更 新 验证 信息 显示 内 容 。 第 18 一 27 行 检查 
每 个 表单 元 素 的 用 户 输入 长 度 。 第 28 一 36 行进 行 正 则 表达 式 验证 。 第 37 行 初 始 化 插件 。 
第 38 行 设 定 对 话 框 不 自动 打开 。 第 39、40 行 设 定 对 话 框 宽 350 像素 、 高 300 像素 。 第 41 
行 设 定 对 话 框 为 模式 对 话 框 。 第 42 一 66 行 设 定 对 话 框 相关 按钮 的 功能 。 

其 中 第 43 一 59 行为 文本 为 “Create an account” 的 按钮 设 定 表单 元 素 内 容 验 证 功能 。 
如 果 验 证 通过 ， 则 在 页 面 上 的 表格 中 添加 一 条 用 户 信息 ， 否 则 在 验证 消息 部 分 显示 错误 消 
息 。 第 60 一 62 行 设 定 “取消 ”按钮 的 关闭 对 话 框 功能 。 第 64 一 66 行 设 定 “ 关 闭 ” 按 钮 的 
附加 功能 ， 将 表单 元 素 内 容 设 置 为 空 ， 并 取消 验证 错误 样式 。 

第 68 一 72 行 添加 调用 打开 对 话 框 行为 的 按钮 功能 ， 效 果 如 图 9.18 一 图 9.20 所 示 。 


oS pr ee 


] 


Password 


John Doe 。 john.doe@example.com johndoel 


Create new user 


Use a modal dialog to require that the user enter data during a multi-step process. Embed form markup in the content area, 
set the modal option to true, and specify primary and secondary user actions with the buttons option. 


Use a modal dialog to require t m markup in the content area, 
set the modal option to true or tons option. 


Create an account | Cancel 
Ed 


图 9.19 对话 框 弹出 后 验证 出 现 错误 效果 
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[ 古 jauevUipbacg -Me indows Internet Explorer 
€] DAWritegookJQuerySite\plugins\dialog\WIDialo do 


EX [jQuery ut Dialog - Modal form 


Existing Users: 


Name Email Password 
JohnDoe john.doe@example.com johndoel 
mickey mickey@disney.com 111111 


Create new user 


Use a modal dialog to require that the user enter data during a multi-step process. Embed form markup in the content area, | 
Set the modal option to true, and specify primary and secondary user actions with the buttons option. 


图 9.20 在 对 话 框 中 成 功 填 入 信息 后 的 页 面 效 果 


6. 模式 消息 对 话 框 

这 个 对 话 框 取消 原 有 对 话 框 功 能 ， 利 用 Dialog 属性 重新 创建 对 话 框 功能 ， 并 在 对 话 框 
中 显示 一 定 的 消息 内 容 。 其 中 ，HTML 代码 和 CSS 代码 请 参考 光盘 内 容 。JavaScript 功能 
代码 如 下 : 

1 <script> 

全 $(function() { 


:| //a workaround for a flaw in the demo system (http://dev. 
jqueryui.com/ticket/4375), ignore! 

4 $( "#dialog:ui-dialog" ).dialog( "destroy" ); 

号 $( "#dialog-message" ) .dialog({ 

6 modal: true, 

法 buttons: { 

8 Ok: function() { 

9 $( this ).dialog( "close”)7 

10 } 

了 和 } 

12 ]) 7 

L307) 


14 </script> 


上 述 代码 第 4 行 的 功能 与 前 面 的 示例 相同 。 第 6 行 设 定 模式 对 话 框 形 式 。 第 8、9 行 
为 OK 按钮 添加 对 话 框 的 关闭 功能 。 效 果 如 图 9.21 所 示 。 
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jQuery ul 
已] DAwriteBookjQuerySite\pluginsvdialog\UIDialogi0 ~ || x 用 只 EE 
突 和 天 | 量 "| 荐 jQuery ul Dialog - Med 苛 jQuen UIDialog - M- x 


ac 

text input 

于 Download complete x 
cbor 

© ee © Your fies have downloaded successfully into 
Emo| the My Downloads folder. 

Currently using 36% of your storage 

exrarea ~ space- 


ok 

| 所 
Use a modal dialog to explicitly acknowledge Information or an action before continuing their work. Set the modal option 
to true, and specify a primary action (Ok) with the buttons option. 


图 9.21 模式 消息 对 话 框 


97 小 结 


本 章 对 jQuery 创建 网 页 对 话 框 进行 了 讲解 。 主 要 内 容 包 括 基 本 对 话 框 实现 原理 ,模式 
对 话 框 及 常用 对 话 框 的 创建 及 操作 ， 并 介绍 了 两 个 对 话 框 插件 。 重 点 部 分 是 对 话 框 的 实现 


原理 及 Dialog 插件 的 使 用 , 同时 这 一 部 分 也 是 本 章 的 难点 。 下 一 章 将 讲解 jQuery 对 滑动 条 
的 实现 。 


9.8 习 题 


【习题 1】 利 用 本 章 所 学 内 容 自 定义 一 个 带 表单 录入 功能 的 模式 对 话 框 。 
【习题 2】 练 习 jQuery.ULDialog 对 话 框 插件 的 使 用 方法 。 
【习题 3】 练 习 jqModal 对 话 框 插件 的 使 用 方法 。 
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在 很 多 网 页 中 ， 都 会 看 到 页 面 中 的 部 分 区 域 可 以 使 用 滑动 条 操作 显示 内 容 ， 但 是 这 里 
的 滑动 条 与 浏览 器 的 滑动 条 不 同 。 这 种 滑动 条 其 实 也 是 页 面 元 素 的 一 部 分 ， 可 以 通过 程序 
来 控制 其 出 现 和 如 何 操作 。 本 章 主 要 讲解 如 何 使 用 jQuery 创建 及 操作 滑动 条 。 


10.1 自 定义 滑动 条 


本 节 主 要 讲解 如 何 使 用 jQuery 创建 区 域 滑动 条 。 它 的 实现 原理 是 : 在 页 面 的 内 容 显 示 
区 域 中 ， 创 建 长 短 适当 的 滑动 条 层 ， 并 在 滑动 条 层 上 添加 鼠标 移动 和 鼠标 键 释放 事件 ， 以 
产生 内 容 和 移动 条 上 下 移动 的 效果 。 其 中 , 使 用 到 了 jQuery 函数 ready()、height()、show()、 
css()、find()、mousemove()、mousedown()。 

其 功能 实现 如 下 。 

(1) 判断 内 容 所 在 层 的 高 度 是 否 大 于 显示 区 域 的 预定 高 度 。 如果 大 于 ， 则 加 入 滑动 条 ， 
否则 不 添加 滑动 条 。 

(2) 加 载 滑动 条 效果 。 

(3) 设 定 滑动 条 区 间 的 鼠标 按 下 事件 ， 在 事件 中 提取 鼠标 位 置 。 

(4) 设 定 滑动 块 鼠标 移动 事件 ， 判 断 鼠 标 移动 位 置 ， 并 按照 鼠标 移动 的 合理 位 置 移动 
显示 内 容 。 

首先 ， 利 用 HTML 创建 静态 页 面 。 相 关 的 CSS 代码 请 参考 光盘 内 容 。 

1 <div id="subwindow"> 

2 <div id="scrollarea"> 
3 <div id="scrollblock"> 
4 <img id="scrollimg" src=""/><br /> 
5 </div> 
6 </div> 
J <div id="content"> 
8 <img src="img/img8.gif" /> 
9 </div> 
10 </div> 


然后 ， 引 入 jQuery 库 文件 : 
<script type="text/JavaScript" src="jslib/jquery.js"></script> 


最 后 ， 加 入 JavaScript 功能 代码 : 
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1 <script type="text/JavaScript"> 
区 $ (function(){ 
3 if($("#content") .height ()>$ ("#subwindow") .height ()) 
4 i 
5 $("#scrollarea") .show ("slow") ; // 显 示 滚 动 区 域 
// 调 整 深 动 块 的 高 度 ， 单 位 为 像素 ， 值 为 整数 
6 $("#scrollblock") .find ("img") .height (parseInt($("#subwindow"). 
height()*$("#subwindow") .height()/ $("#content") .height())); 
7 $("#scrollblock") .show ("slow") ;// 显 示 滚 动 块 
// 定 义 鼠标 位 置 变量 及 内 容 坐 标 变量 
8 Var mouseX=0; 
本 Var mouseY=0; 
10 Var contentXx=0; 
到 Var contentY=0; 
2 $("#scrollarea") .mousedown (function(e)1{ 
// 鼠 标 在 滚动 区 间 内 的 左 键 按 下 事件 
13 var devent=e||event; // 获 取 事 件 参数 
14 mouseX=devent.clientX:; // 获 取 鼠 标 坐 标 
15 mouseY=devent .clientYy; 
16 contentX=parseInt ($("#scrollblock") .css("left")); 
// 获 取 内 容 位 置 
7 contentY=parseInt ($("#scrollblock") .css("top")); 
18 ]}) 
19 S$("#scrollblock") .mousemove (function (e){  // 和 鼠标 移动 深 动 块 事件 
20 var devent=e||event; // 获 取 事 件 参 数 
| var distance=devent.clientY-mouseY+contentYy; 
// 计 算 鼠 标 纵向 移动 影响 内 容 移动 位 移 
这 if(distance<0) 
3 distance=0; 
24 else if(distance>=$ ("#scrollarea") .height ()-$ 
("#scrollblock") .height ()) 
25 distance=$ ("#scrollarea") .height ()-$ ("#scrollblock"). 
height (); 
26 $("#scrollblock") .css ("top",distancet+"px"); 
// 修 改 滑动 块 纵向 位 移 
27 S$("#content").css("top",- (distance*(parseInt ($("#content") .height () 
-S$ ("#subwindow") .height ()))/(parseInt ($ ("#scrollarea") .height ())-— 
parseInt ($ ("#subwindow") .height ()*$ ("#subwindow") .height ()/ $ 
("#content") .height ())))+"px"); 
28 ])7 // 更 改 内 容 移 动 位 移 
30 1 [> 总 -| 四 Debuopar 全-| 日 
3 Hs 
32 </script> 


上 述 代 码 第 5 一 7 行 对 滑动 条 的 显示 进行 设置 。 第 12 一 18 行 
设 定 滑动 条 区 域 的 鼠标 按 下 事件 。 在 这 个 事件 中 获取 了 鼠标 位 置 
和 滑动 块 的 位 置 。 第 19 一 28 行 设 定 了 滑动 块 的 鼠标 移动 事件 


判断 鼠标 的 偏 移 位 移 是 否 在 合理 区 间 内 。 如 果 滑 动 块 可 以 移动 ， 
则 移动 滑动 块 ， 并 移动 对 应 位 移 的 内 容 。 效 果 如 图 10.1 所 示 。 图 10.1 
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10.2 滑动 条 插件 


本 节 介 绍 儿 种 滑动 条 插件 。 这 些 插 件 为 页 面 创建 出 了 不 同样 式 、 不 同 功能 的 滑动 条 
效果 。 


10.2.1 jQuery.Ul.Slider 插件 


jQuery.UISlider 插件 是 jQuery 官方 网 站 提供 的 一 整套 UI 插件 中 的 一 部 分 。 它 的 主要 
功能 是 利用 jQuery 生成 特定 功能 的 滑动 条 。 这 个 插件 需要 以 下 jQuery 文件 的 支持 : 
jquery.ui.core.js、 jquery.ui.widget.js、jquery.ui.mouse.js。 


这 个 插件 有 一 些 相关 属性 ， 可 以 设置 滑动 条 的 样式 和 行为 ， 如 表 10.1 所 示 。 
表 10.1 滑动 条 的 属性 


属 性 类 型 说 上 明 
disable 。 | 布尔 屏蔽 或 者 启用 滑动 条 功能 
当 用 户 单 击 滑动 块 外 部 时 ， 它 的 处 理 效果 是 否 平 

animate 布尔 ， 字 符 串 ， 数 字 | false 滑 ; 或 者 使 用 不 同 字符 串 表 示 动 画 速 度 ， 也 可 以 
用 数字 表示 动画 具体 执行 毫秒 数 

max 数字 | 100 | 滑动 条 所 能 表示 的 最 大 值 

min 数字 | 0 | 滑动 条 所 能 表示 的 最 小 值 

orientation | 字符 串 滑动 条 的 滑动 方向 ， 是 从 左 向 右 ， 还 是 从 下 向 上 
范围 设 定 ， 如 果 设 置 为 真 ， 则 检测 是 否 有 两 个 

range 布尔 ， 字 符 串 滑动 块 ， 一 块 从 小 向 大 滑动 ， 另 一 块 从 大 向 小 
移动 

step 数字 滑动 块 移动 的 步 长 或 者 单位 间隔 

机 二 oo | 设置 滑动 块 的 值 ， 如 果 有 多 个 滑动 块 ， 则 对 第 一 
个 进行 设置 

values ”| 数组 | nol | 设置 多 个 滑动 块 的 什 


与 这 个 滑动 条 相关 的 还 有 事件 选项 ， 如 表 10.2 所 示 。 
表 10.2 滑动 条 的 事件 
类 型 说 明 
slidecreate 滑动 条 被 创建 时 触发 
slidestart 当 用 户 开始 滑动 滑动 块 时 触发 
slide 当 鼠 标 移动 滑动 块 时 触发 
slidechange 滑动 操作 停止 时 触发 ， 或 者 通过 编程 改变 当前 值 时 触发 
slidestop 当 用 户 停止 滑动 操作 时 触发 


滑动 条 有 一 些 行为 可 以 控制 滑动 条 的 相关 操作 ， 如 表 10.3 所 示 。 
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表 10.3 ”滑动 条 的 行为 


行 说 明 

destroy .slider( "destroy" ) 完全 删除 滑动 条 的 功能 

disable .Slider( "disable" ) 屏蔽 滑动 条 

enable .Slider( "enable" ) 启用 滑动 条 

option 获取 或 设置 滑动 条 属性 

widget .slider( "widget" ) 返回 滑动 条 元 素 

value .slider( "value" , [value] ) 获取 或 设置 单 滑 动 块 的 滑动 条 的 值 
option .Slider( "option" , options ) -次 设 定 多 个 滑动 条 属性 


values 获取 或 设置 多 个 滑动 块 的 滑动 条 的 所 有 值 

下 面 通 过 示例 来 介绍 一 下 这 个 插件 的 使 用 方法 。 

1. 默认 样式 滑动 条 

这 个 示例 使 用 滑动 条 的 默认 参数 形式 ， 只 调用 了 滑动 条 插件 的 初始 化 函数 。 这 种 情况 
下 滑动 块 可 以 随意 移动 ， 并 且 移 动 的 单位 长 度 也 不 固定 。JavaScript 功能 代码 如 下 : 
<script> 


$(function() { 
$( "#slider" ) .slider();  ”// 利 用 滑动 条 插件 基本 功能 


]}) 7 
</script> 


第 3 行 中 的 slider0 就 是 滑动 条 插件 的 初始 化 函数 。 它 使 用 了 滑动 条 的 默认 样式 ， 并 在 
页 面 加 载 后 自动 显示 滑动 条 ， 效 果 如 图 10.2 所 示 。 


@ jQuery ul Slider - Default functionality - Windows Internet Explorer 


ORODPp 


入 


The basic stider is horizontal and has a single handle that can be moved with the mouse or by using the arrow keys. 


图 10.2 默认 样式 滑动 条 


2. 控制 步 进 滑动 条 
这 个 示例 使 用 前 面 介绍 的 滑动 条 的 步 进 属 性 〈 即 滑动 条 移动 的 单位 长 度 ) ， 并 使 用 滑 
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动 条 插件 的 初 值 及 最 大 最 小 值 属性 和 滑动 事件 。 与 前 面 的 示例 不 同 的 是 滑动 块 具有 了 最 大 
和 最 小 移动 范围 ， 并 且 单 位 移动 长 度 已 知 ， 便 于 我 们 通过 判断 滑动 块 的 位 置 而 得 到 它 所 代 
表 的 值 。JavaScript 功能 代码 如 下 : 


1 <script> 

2 S$(function() { 

3 $( "#slider" ).slider({ 

4 value:100, / /滑动 条 初始 位 置 

5 min: 0, // 滑 动 条 最 小 表示 位 置 
6 max: 500, // 滑 动 条 最 大 表示 位 置 
也 step: 50, // 滑 动 条 单位 移动 位 移 
8 slide: function( event，ui ) { // 滑 动 条 滑动 事件 处 理 
9 $( "#amount" ) .val( "$" + ui.value ); 

10 } 

11 1D); 

2 $( "#amount" ).val( "$" + $( "#slider”).slider( "value" ) ) 7 
3 


14 </script> 

上 述 代码 中 第 4 行 设 定 滑 动 块 的 初始 位 置 。 第 5 行 设 定 滑动 条 最 小 值 。 第 6 行 设 定 最 
大 值 。 第 7 行 设 定 步 进 为 50。 第 9、10 行 设 定 当 滑 动 块 移动 时 更 改 显示 值 。 效 果 如 图 10.3 
所 示 。 


OO |e] bswiegoowiauenstepugnsdagao -| 4 x | Be 


帘 收 训 夫 | 息 jQuery UI Slider - Snap to increments 


Donation amount (550 increments): $250| 


Increment slider values with the step option set to an integer, commonly a dividend of the stiders maximum 
value. The default increment is 1. 


图 10.3” 设 定 步 进 滑动 条 


3. 设 定 表示 范围 的 滑动 条 


这 个 示例 使 用 滑动 条 的 范围 参数 ， 并 使 用 滑动 条 插件 的 初 值 及 最 大 最 小 值 属性 和 滑动 
事件 。 表 示范 围 的 滑动 框 由 分 别 表 示范 围 上 限 和 范围 下 限 的 两 个 滑动 块 组 成 ， 并 且 每 个 滑 
动 块 都 有 自己 的 移动 区 间 ， 用 户 可 以 更 形象 地 通过 移动 滑动 块 来 获取 范围 空间 。JavaScript 
功能 代码 如 下 : 
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下 <script> 

六 $(function() { 

各 $( "#slider-range" ) -slider({ 

4 range: true, // 设 定 表示 范围 功能 

5 min: 0, // 范 围 最 小 值 可 为 0 

6 max: 500, // 范 围 最 大 值 为 500 

7 values: [ 75，300 ], // 表 示范 围 区 间 的 初始 值 

8 slide: function( event，ui ) { // 滑 动 条 滑动 事件 

9 SO "4amount™ .val( "SS" + ui.values[l OJ + ™ = 9 +4 Vi 
values[ 1 ] ); 

10 1 

站 人 ]) 7 

2 $( "#amount"”) .val( "$" + $( "#slider-range" ) .slider( "values", 0 ) + 

13 "”- $" + $( "#slider-range" ).slider( "values", 1 ) ); 

14 })s 

15 "</script> 


上 述 代 码 中 第 4 行 设 定 了 滑动 条 功能 为 表示 范围 ， 即 具有 两 个 滑动 块 ， 分 别 表示 最 大 
9 第 7 行 设 定 了 范围 初始 值 ， 即 两 个 滑动 块 的 初始 位 置 。 效 果 如 图 10.4 所 示 。 


| 本 丰 7 


Price range: $130 . $300 


人 


Set the range option to true to capture a range of values with two drag handles. The space between the handles 
1s filled with a different background color to indicate those values are selected. 


图 10.4 设 定 范围 滑动 条 


4. 国定 了 最 小 值 范围 的 滑动 条 


这 个 示例 使 用 滑动 条 的 范围 参数 ， 并 使 用 滑动 条 插件 的 初 值 及 最 大 最 小 值 属性 和 滑动 
事件 。 固 定 最 小 值 滑动 块 的 位 置 即 固定 了 范围 下 限 ， 通 过 代表 范围 上 限 的 滑动 块 的 移动 获 
取 区 间 值 。JavaScript 功能 代码 如 下 : 

四 <script> 


本 $(function() { 
3 $( "#slider-range-min" ).slider({ 
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4 range: "min", // 设 定 最 小 值 范 围 

5 value: 37, // 最 小 范围 值 为 37 

6 mine ls // 最 小 值 为 1 

yl max: 700, // 最 大 值 为 700 

8 slide: function( event，ui ) { // 滑 动 条 滑动 事件 

9 $( "#amount" ).val( "$" + ui.value ); 

10 ! 

11 全 

人 $( "#amount"”) -val( "$" + $( "#slider-range-min" ).slider 
(a 

13 1}); 


14 </script> 


上 述 代 码 第 4 行 设 定 滑动 条 功能 为 表示 范围 ， 但 固定 了 范围 最 小 值 不 动 ， 用 户 只 可 修 
改 范围 最 大 值 。 效 果 如 图 10.5 所 示 。 


2 pm 


宽 必 硬 夫 | 辜 jQuen Ul Slider - Range with fixed minimum 


Maximum price: $205 


| 


Fix the minimum value of the range stider so that the user can only select a maximum. Set the range option to 
“min.” 


图 10.5 固定 了 最 小 值 的 范围 滑动 条 


5. 国定 最 大 值 的 滑动 条 


这 个 示例 使 用 滑动 条 的 范围 参数 ， 并 使 用 滑动 条 插件 的 初 值 及 最 大 最 小 值 属 性 和 滑动 
事件 。 与 上 例 相 反 ， 此 处 是 下 限 可 调整 。JavaScript 功能 代码 如 下 : 


十 <script> 

2 $(function() { 

3 $( "#slider-range-max" ).slider({ 

4 range: "max", // 设 定 最 大 范围 表示 功能 
5 min: 1, // 最 小 表示 值 为 1 
6 max: 10, // 最 大 表示 值 为 10 
攻 value: 2, // 初 始 值 为 2 

8 slide: function( event，ui ) { // 滑 动 条 滑动 事件 
9 $( "#amount™" ).val( ui.value ); 

10 } 

型 ]) 
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Hs 


$( "#amount" ).val( $( "#slider-range-max" ) .slider( "value" ) ); 


14 </script> 


上 述 代 码 第 4 行 设 定 滑动 条 功能 为 表示 范围 ， 但 固定 了 范围 最 大 值 不 动 ， 用 户 只 可 修 
改 范 围 最 小 值 。 效 果 如 图 10.6 所 示 。 


SS 


帘 收 天 眉 jQuery Ul Slider - Range with fixed maximum 


| DAWriteBookjQuerysite\plugins\diad ~ 


Pa 


Minimum number of bedrooms: 4 


Fix the maximum value of the range stider so that the user can only select a minimum. Set the range option to 
“max.™ 


各 


= 一 一 一 一 一 一 一 J 


图 10.6 固定 了 最 大 值 的 范围 滑动 条 


6. 通过 外 部 元 素 改变 滑动 条 


这 个 示例 使 用 滑动 条 的 范围 参数 ， 并 使 用 滑动 条 插件 的 初 值 及 最 大 最 小 值 属性 和 滑动 
事件 。 通 过 用 户 在 其 他 部 分 输入 范围 值 ， 并 将 此 值 在 滑动 块 上 显示 出 来 ， 使 用 户 更 形象 地 
了 解 自己 选择 的 范围 值 。JavaScript 功能 代码 如 下 : 


<script> 
$(function() { 
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1D); 


var select = $( "#minbeds" ); 
var slider = $( "<div id='slider'></div>" ) .insertAfter 
( select ) .slider({ 


mn // 最 小 表示 值 为 1 

max: 6, // 最 大 表示 值 为 6 
range: "min", // 设 定 最 小 范围 表示 功能 
value: select[ 0 ].selectedIndex + 1, 

slide: function( event, ui ) { // 滑 动 条 滑动 事件 


select[ 0 ].selectedIndex = ui.value - 1; 
时 
]) 7 
$( "#minbeds" ) .change (function() { 
slider.slider( "value", this.selectedIndex + 1 ); 


D); 


o/cnipt> 
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上 述 代码 第 4 行 通过 jQuery 动态 创建 了 滑动 条 所 在 层 ， 并 调用 滑动 条 初始 化 函数 。 第 
8 行 对 表示 范围 上 限 的 滑动 块 设 定 初始 值 ， 但 是 这 个 值 是 通过 下 拉 列 表 框 获取 的 。 这 个 滑 
动 条 也 是 范围 滑动 条 ， 固 定 了 最 小 值 不 变化 ， 并 可 通过 下 拉 列 表 框 修改 最 大 值 。 效 果 如 图 
10.7 所 示 。 
ey Ue RE 
CTI e owtesooyQuerysite\pluginsdiobdo | | x Be 


六 二 一 
| 人 富 收 BE 夫 碟 jQuery UI Slider - Range with fixed minimum 


Re 


How to bind a stider to an existing select element. The select stays visible to display the change. When the select is 
changed, the stider is updated, too. 


图 10.7 外 部 元 素 控制 最 大 值 变 化 滑动 条 


7. 垂直 滑动 条 


这 个 示例 使 用 滑动 条 的 滑动 方向 和 范围 参数 ， 并 使 用 滑动 条 插件 的 初 值 及 最 大 最 小 值 
属性 和 滑动 事件 。 这 里 只 是 简单 地 将 前 面 使 用 的 滑动 条 纵向 摆 放 ， 产 生 了 垂直 滑动 条 的 效 
果 。JavaScript 功能 代码 如 下 : 


1 <script> 

人 $(function() { 

3 $( "#slider-vertical" ) .slider({ 

4 orientation: "vertical", // 垂 直 滑动 

5 range: "min", // 最 小 表示 范围 

6 min: 0, // 最 小 表示 值 为 0 
沁 max: 100, // 最 大 表示 值 为 100 
8 value: 60, // 初 始 值 为 60 

9 slide: function( event，ui ) { // 滑 动 条 滑动 事件 
10 $( "#amount" ).val( ui.value ); 

二 下 

4 Ds; 

3 $( "#amount" ) -val( $( "#slider-vertical™" ).slider( "value" ) ) > 


os 
Lo /oeript> 


上 述 代 码 第 4 行 通过 滑动 条 的 滑动 方向 参数 ， 设 定 了 滑动 条 垂直 滑动 ， 并 且 最 小 值 滑 
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动 块 固 下 效果 如 图 10.8 所 示 。 


8. 


这 


突 收 天 jQuery Ul Shder - Vertical skder 


Volume: 20 


Change the orientation of the stider to vertical. Assign a height value via . height () or by setting the 
height through CSS, and set the orientation option to “vertical.™ 


图 10.8 ”垂直 滑动 条 


配色 功能 滑动 条 


个 示例 实现 通过 表示 三 原色 的 三 个 滑动 条 的 取 值 变化 ， 产 生 不 同 颜色 搭配 。 该 示例 


使 用 滑动 方向 、 范 围 、 最 大 值 、 初 始 值 属性 及 滑动 块 移动 和 值 改变 事件 。 
块 的 移动 代表 三 原色 的 不 同 的 值 ， 并 对 这 些 值 进 行 运算 ， 搭 配 出 混合 后 的 颜色 。 
JavaScript 功能 代码 如 下 : 


中 滑动 


是 
的 
六 
4 
3 
6 
7 
8 
入 


下 3 


区 
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function hexFromRGB(r, g, b) { 


通过 三 个 滑动 条 


var hex = [ // 三 原色 十 六 进 制 值 字符 串 


rtostring( 16 > 

gqtostring( 16 

b.tostring( 16 ) 
I 


$.each( hex，function( nr，val ) { // 每 种 颜色 值 用 两 位 十 六 进 制 数 表示 


if ( val.length === 1 ) { 
hexb nel = "0 vAals 
} 
1D); 


return hex.join("" ) .toUpperCase();// 拼 接 成 一 个 六 位 的 十 六 进 制 字 符 串 


} 
function refreshSwatch() { 
var red = $( "#red" ) .slider( "value" )，, 
green = $( "#green" ).slider( "value" )， 
blue = $( "#blue" ) .slider( "value" )， 
hex = hexFromRGB( red, green, blue ); 


S(t "#swatch” ) ,css( "background= color", “#" + hex )s 


} 
$(function() { 
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史 人 2 $( "#red, #green, #blue" ) .slider({ 

23 orientation: "horizontal", // 水 平滑 动 

24 range: "min", // 最 小 表示 范围 功能 
25 max: 255, // 最 大 表示 值 

26 value: 127, // 初 始 值 

2 slide: refreshSwatch, // 滑 动 事件 

28 change: refreshSwatch / /滑动 块 改变 位 置 事件 
29 Ey 

30 S(t "4red” J -slider( "valua”, 255  )r 

3 $( "#green" ).slider( "value", 140 ); 

32 $( "#blue" ).slider( "value", 60 ); 

33 1}); 


34 </script> 


上 述 代 码 第 1 一 13 行 表示 将 三 个 不 同 滑动 条 的 十 进 制 整 型 值 转换 成 一 个 六 位 的 十 六 进 
制 字符 串 。 第 14 一 20 行 表示 提取 三 个 滑动 条 的 整 型 值 并 进行 转换 后 将 颜色 显示 出 来 。 第 
22 一 29 行 是 三 个 滑动 条 的 初始 化 设 定 ， 并 指定 了 两 个 事件 所 关联 的 函数 。 第 30 一 31 行 分 
别 指定 三 个 滑动 条 的 不 同 起 始 值 。 效 果 如 图 10.9 所 示 。 


图 10.9 滑动 条 实现 颜色 搭配 


9. 内 容 滚动 条 


这 个 示例 使 用 滑动 条 与 内 容 层 搭配 产生 滚动 条 效果 ， 主 要 是 对 滑动 条 的 初始 值 和 滑动 
事件 进行 操作 ， 并 且 在 这 个 示例 中 滑动 条 可 根据 窗口 大 小 自动 调整 宽度 。 与 本 章 最 开始 讲 
解 的 例子 类 似 , 通过 将 滑动 条 的 位 移 转换 成 内 容 的 位 移 , 就 产生 了 内 容 滚动 效果 。 JavaScript 
功能 代码 如 下 : 

<script> 

2 S$(function() { 
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// 滚 动 区 域 
Var scrollPane = $(  "-scrol1-pane" ) ， 
scrollContent = $( ".scroll-content"™ ) 7 


//build slider 
Var scrollbar = $( ".scroll-bar™" ) .slider({ 
slide: function( event, ui ) { 
if ( scrollContent.width() > scrollPane.width() ) { 
// 判 断 显示 内 容 宽度 与 显示 区 域 宽 度 
scrollContent.css( "margin-left" ，Math.round( 
ui.value / 100 * ( scrollPane.width() - scroll- 
Content.width() ) 
大 a // 设 定 内 容 显 示 位 置 
} else { 
scrollContent.css( "margin-left", 0 ); 


a 
var handleHelper = scrollbar.find( ".ui-slider-handle" ) 
.mousedown (function() { 
scrollbar.width( handleHelper.width() ); 
]}) 
.mouseup (function() { 
scrollbar.width( "100%" ) 
}) ”// 设 定 滑动 条 的 鼠标 左 键 按 下 与 释放 事件 
.append( "<span class='ui-icon ui-icon-grip-dotted-vertical'> 
</span>" ) // 添 加 图 标 


.wrap( "<div class='ui-handle-helper-parent'></div>" ) .parent() 


//change overflow to hidden now that slider handles the scrolling 
scrollPane.css( "overflow", "hidden™" ); 


//size scrollbar and handle proportionally to scroll distance 
function sizeScrollbar() { 
var remainder = scrollContent.width() - scrollPane.width(); 
// 内 容 宽度 与 显示 区 域 宽度 的 差 
Var proportion = remainder / scrollContent.width(); 
// 未 显示 宽度 占 整个 内 容 宽 度 的 比例 
var handleSize = scrollPane.width() - (proportion * scrollPane. 
width() ); 
/ /滑动 区 间 的 宽度 
scrollbar.find( "-ui-slider-handle" ) .css({ 
width: handleSize, 
"margin-left": -handleSize / 2 
DD); 
handleHelper.width( "" ) .width( scrollbar.width() - handleSize ); 
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44 
45 
46 
47 
48 
49 
50 
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53 
54 
35 
56 
5 
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1); 


//reset slider value based on scroll content position 
function resetValue() { 
var remainder = scrollPane.width() - scrollContent .width(); 
var leftVal = scrollContent.css( "margin-left" ) === "auto" ?0 : 
ParseInt( scrollContent.css( "margin-left" ) ); 
// 显 示 内 容 的 左 偏 移 量 
var Percentage = Math.round( leftVal / remainder * 100 ); 
// 左 偏 移 量 占 整个 未 显示 宽度 的 百分比 
scrollbar.slider( "value", percentage ); 


} 


// 滑 动 块 到 最 大 位 置 , 当 窗 口 变 大 时 ,重新 设置 显示 内 容 
function reflowContent () { 
var showing = scrollContent.width() + parseInt(scroll- 
Content.css( "margin-left" ), 10 ); 
// 当 前 显示 内 容 的 偏 移 位 置 
var gap = scrollPane.width() - showing; 
// 显 示 位 置 与 显示 区 域 的 差 
if ( gap > 0 ) { ， // 是 否 超出 显示 范围 ， 如 果 大 于 0， 则 可 显示 
scrollContent.css( "margin-left", parseInt( scroll- 
Content.css( "margin-left" ), 10 ) + gap ); 


bi 


//change handle position on window resize 
$( window ) .resize(function() { 
resetValue () 7 
sizeScrollbar (); 
reflowContent (); 
J 
//init scrollbar size 
setTimeout ( sizeScrollbar, 10 );//safari wants a timeout 


TS </script> 


上 述 代码 第 4、5 行 获取 显示 内 容 的 层 对 象 。 第 8 一 18 行 建立 滑动 条 ， 设 定 滑动 事件 。 
当 内 容 长 度 大 于 显示 区 域 宽度 时 ， 按 照 滑 动 块 所 在 位 置 算出 内 容 宽 度 百分比 ， 进 行内 容 的 
相对 位 移 。 第 21 一 24 行 设 定 鼠 标 按 下 和 抬 起 时 滑动 条 宽度 。 第 28、29 行 添加 图 标 到 滑动 
块 ， 第 32 行 设 定 浮动 层 隐藏 。 

第 35 一 44 行 根 据 显示 内 容 宽度 与 显示 区 域 的 宽度 比 来 设 定 滑动 块 和 滑动 条 的 宽度 。 
第 47 一 53 行 根据 显示 内 容 的 当前 位 置 和 宽度 比 来 设 定 新 的 滑动 块 的 位 置 。 第 56 一 62 行 设 


定 显示 内 容 的 当前 显示 位 置 。 第 65 一 69 行 根 据 窗口 大 小 的 改变 修改 滑动 块 的 位 置 。 效 果 如 
图 10.10 所 示 。 
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Use astider to manipulate the positioning of content on the page. In this case, it acts as a scrollbar 
with the potential to capture values if needed. 


图 10.10 滑动 条 改变 显示 内 容 


10.2.2 jScrollPane 插件 


jScrollPane 插件 是 一 个 跨 浏览 器 的 jQuery 插件 ， 它 的 英文 网 址 为 http://jscrollpane. 
kelvinluck.com/。 它 可 以 将 浏览 器 默认 的 滚动 条 转 为 HTML 结构 的 ， 并 可 通过 CSS 灵活 改 
变 外 观 的 滚动 条 形式 。jScrollPane 灵活 易 用 。 


这 个 插件 有 一 些 相 关 属 性 ， 可 以 设置 滚动 条 的 样式 和 行为 ， 如 表 10.4 所 示 。 


表 10.4 jScrollPane 插 件 的 属性 说 明 


属 性 类 型 说 明 

showArrows 布尔 是 否 显示 两 端的 箭头 按钮 

maintainPosition 布尔 当 重新 初始 化 时 ， 滚 动 条 是 否 保持 原 有 位 置 

stickToBottom 布尔 false 在 sainiainbosition 属性 为 真 的 时 候 ， 当 整个 深 动 条 
已 经 到 达 底 端的 时 候 ， 保 持 这 个 状态 

Es maintainPosition 属性 为 真 的 时 候 ， 当 整个 滚动 条 

于 布尔 “| ae 。 | 忆 权 达 有 抽 的 时 续 ， 保 持 这 丰 检 阁 

i 在 第 -次 初始 化 后 ， 是 否 再 次 自动 初始 化 。 当 内 容 发 
生 改 变 时 ， 不 建议 使 用 

autoReinitialiseDelay 自动 初始 化 间隔 的 毫秒 数 

VerticalDragMinHeight 垂直 拖 动 的 最 小 高 度 

verticalDragMaxHeight 垂直 拖 动 的 最 大 高 度 

horizontalDragMinWidth 水 平 拖 动 的 最 小 宽度 

horizontalDragMaxWidth 水 平 拖 动 的 最 大 宽度 

contentWidth 滚动 条 内 容 宽度 

animateScroll 当 调 用 滚动 方法 时 使 用 动画 效果 

animateDuration 动画 滚动 的 持续 时 间 ， 单 位 为 毫秒 

animateEase 动画 类 型 
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属 性 说 明 

hijackInternalLinks 是 否 在 插件 作用 范围 内 使 用 书签 链接 
verticalGutter 设置 显示 内 容 到 垂直 滚动 条 边框 空格 的 个 数 
horizontalGutter 设置 显示 内 容 到 水 平 滚动 条 边框 空格 的 个 数 
mouseWheelSpeed 鼠标 滚轮 步 进 的 位 移 量 
arrowButtonSpeed 单 击 箭头 按钮 移动 的 单位 位 移 量 
arrowRepeatFreq 第 头 按钮 点 击 频率 ， 单 位 为 毫秒 
arrowScrollOnHover 当 鼠 标 悬 停 在 箭头 按钮 上 时 ， 是 否 触 发 滚动 

a 生 直 滚动 条 币 头 按钮 出 现 的 位 置 ， 可 选 值 为 
vertical ArrowPositions splillbetoteladieles 

水 平 滚动 条 箭头 按钮 出 现 的 位 置 ， 可 选 值 为 


horizontal ArrowPositions 


splitlbeforelafterlos 


enableKeyboardNavigation | 布尔 是 否 可 以 使 用 键盘 方向 键 操作 滚动 条 
hideFocus j 尔 是 否 隐藏 焦点 ， 建 议 设 为 隐藏 
clickOnTrack j 尔 是 否 允 许 单 击 改变 滚动 条 滚动 位 置 
trackClickSpeed 整 型 鼠标 单 击 一 次 的 步 进 值 
trackClickRepeatFreq 整 型 鼠标 单 击 间隔 时 间 ， 单 位 为 毫秒 


滚动 条 有 一 些 函 数 可 以 控制 滚动 条 的 相关 操作 ， 如 表 10.5 所 示 。 


表 10.5 
函数 形式 


reinitialise(s) 


scrollToElement(ele, stickToTop, animate) 


jScrollPane 插 件 的 函数 说 明 
说 明 

再 次 初始 化 滚动 条 ， 如 果 有 新 的 属性 设置 则 重新 配置 ， 如 
果 没 有 则 沿用 上 一 次 初始 化 的 属性 设置 

将 一 个 jQuery 对 象 、 DOM 节点 或 者 jQuery 选择 器 字符 串 
所 指向 的 元 素 移动 到 指定 显示 位 置 ,如 果 stickToTop 为 真 ， 
则 移动 到 可 见 位 置 的 最 上 端 ， 否 则 在 可 见 位 置 下 端 ， 也 可 
指定 动画 效果 


scrollTo (destX, destY, animate) 


设 定 滚动 条 滚动 到 内 容 的 指定 纵向 横向 位 置 ， 可 以 添加 动 
画 效果 


scrollToX (destX, animate) 
scrollToY (destY, animate) 


scrollToPercentX (destPercentX, animate) 


设 定 滚动 条 横向 滚动 到 的 位 置 ， 可 以 添加 动画 效果 

设 定 深 动 条 纵向 滚动 到 的 位 置 ， 可 以 添加 动画 效果 

设 定 滚动 条 横向 滚动 到 占 最 大 值 指定 百分比 的 位 置 ， 可 以 
添加 动画 效果 


scrollToPercentY (destPercentY, animate) 


scrollBy(deltaX, deltaY, animate) 


设 定 滚动 条 纵向 滚动 到 占 最 大 值 指定 百分比 的 位 置 ， 可 以 
添加 动画 效果 

设 定 横向 纵向 滚动 的 相对 偏 移 量 ， 单 位 为 像素 ， 可 以 添加 
动画 效果 


设 定 横向 滚动 的 相对 偏 移 量 ， 单 位 为 像素 ， 可 以 添加 动画 


scrollByX(deltaX, animate) 效果 
设 定 纵 向 滚动 的 相对 量 ， 六 为 像素 ， 添加 动画 
scrollByY(deltaY., animate) ee 单位 为 像素 ， 可 以 添加 动画 
x 
positionDragX (x, animate) 水 平抑 动 的 位 置 ， 可 以 添加 动画 效果 
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函数 形式 说 明 
positionDragY (y, animate) 垂直 拖 动 的 位 置 ， 可 以 添加 动画 效果 
当 滨 动 条 动画 到 一 个 新 位 置 时 调用 这 个 函数 , ele 为 使 用 动 
animate (ele, prop, value, stepCallback) 画 的 元 素 , prop 为 使 用 动画 的 属性 , value 为 动画 中 的 属性 


值 ，stepCallback 为 更 新 属性 值 需 要 执行 的 方法 


getContentPositionX() 返回 深 动 条 的 当前 横向 下 轴 位 置 
getContentPositionY() 返回 滚动 条 的 当前 纵向 了 轴 位 置 
getContentWidthO) 返回 滚动 条 宽度 

getContentHeightO 返回 滚动 条 高 度 

getIsScrollableHO 返回 判断 是 否 有 横向 深 动 条 
getPercentScrolledXO 返回 深 动 条 相对 显示 区 域 横向 位 置 
getPercentScrolledY() 返回 滚动 条 相对 显示 区 域 纵向 位 置 
getIsScrollableVO 返回 判断 是 否 有 纵向 滚动 条 
getContentPane() 获得 一 个 滚动 条 的 引用 
scrollToBottom(animate) 滚动 条 滚动 到 下 端 
hijackInternalLinksO 书签 链接 操作 

destroy() 销毁 滚动 条 


下 面 通过 示例 来 介绍 一 下 这 个 插件 的 使 用 方法 。 
1 默认 样式 滚动 条 


这 个 示例 使 用 滚动 条 的 默认 参数 形式 ， 只 调用 了 滚动 条 插件 的 初始 化 函数 ， 并 适当 加 
入 了 一 些 简单 属性 设置 。 其 中 ，HTML 代码 和 CSS 代码 请 参考 光盘 内 容 。JavaScript 功能 
代码 如 下 : 


而 <script type="text/JavaScript"> 

区 $ (function () 

3 { 

4 // 设 置 默 认 属 性 选择 值 ， 显 示 上 下 移动 箭头 

3 $.extend($.fn.jScrollPane.defaults, {showArrows:true}); 

6 // 上 一 行 代码 也 可 进行 如 下 设 定 

//$.fn.jScrollPane.defaults.showArrows = true; 

8 // 插 件 初始 化 

对 $('#panel') .jScrollPane (); 

10 $('#pane2') .jsScrollPane (); 

1 // 将 第 3 个 插件 的 上 下 移动 箭头 取消 ， 并 设 定 滚动 条 的 宽 和 间隔 距离 

12 $('#pane3') .jScrollPane ({scrollbarWidth:20，scrollbar- 
Margin:10, showArrows:false}); 

3 $('#pane4') .jScrollPane(); 

14 

Ts // 向 第 4 个 插件 中 加 入 内 容 事件 

16 // 当 向 其 中 加 入 内 容 时 ， 会 要 求 重新 初始 化 这 个 插件 

eh $('#add-content') .bind( 

18 "click' ， 

19 function() 
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20 

2 $('#pane4') .append ($('<p></p>') .html ($('#intro'). 
html ())).jScrollPane (); 

22 } 

23 ); 

24 // 从 第 4 个 插件 中 删除 内 容 事件 

25 // 这 里 也 会 要 求 重 新 初始 化 插件 

26 $('#remove-content') .bind( 

7 "olick"s 

28 Eunction() 

29 二 

30 $('#pane4') .empty() .apPend($('<Pp></P>') .html 
($('#intro') .html())) .jScrollPane(); 

和 } 

32 Ds 

33 Ds 

34 

9 </script> 


上 述 代 码 第 5 行 设 定 了 插件 的 显示 箭头 按钮 的 属性 。 第 9、10、12、13 行 初始 化 了 4 
个 滚动 条 。 第 12 行 配置 了 滚动 条 的 宽 为 20 像素 ， 间 隔 为 10 像素 ， 不 显示 箭头 按钮 。 第 
17 一 23 行 绑 定 了 向 第 4 个 滚动 条 所 在 区 域 添加 内 容 的 事件 。 第 26 一 32 行 绑 定 了 从 第 4 个 
滚动 条 所 在 区 域 删 除 内 容 的 事件 。 效 果 如 图 10.11 和 图 10.12 所 示 。 


#pane1 #pane2 #pane3 


图 10.11 通过 上 默认 选项 创建 滚动 条 
2. 自 定义 浏览 器 滚动 条 
这 个 示例 利用 jScrollPane 创建 的 滚动 条 来 代替 浏览 器 默认 的 滚动 条 。 在 某 些 情况 下 浏 


ss 
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览 器 自身 的 滚动 条 的 样式 满足 不 了 需要 ， 此 时 可 以 使 用 这 个 插件 创建 属于 我 们 自己 的 浏览 


器 滚动 条 。JavaScript 功能 代码 如 下 : 


入 jscrollpane - default options - Windows Internet 


DppPppPpAPPPPPOOJIAOMAWONDPp 
= 


[9 
I 


DL 
DL 
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图 10.12 


向 深 动 条 所 在 区 域 动态 添加 内 容 后 效果 


<script type="text/JavaScript"> 
$ (function() 


{ 


$.extend($.fn.jScrollPane.defaults, { 


x 


showArrows:true, // 显 示 表示 滑动 方向 的 箭头 
scrollbarWidth:15, // 设 定 滑 动 条 宽度 
arrowSize:16 // 设 置 箭头 图 标 大 小 


var isResizing; 
// 获 取 整 个 容器 高 度 


var setContainerHeight = function() 


{ 


//IE 触发 浏览 器 大 小 改变 事件 
// 避 免 浏 览 器 冲突 


if (!isResizing) { 


isResizing = true; 

Sw = $ (window); 

$c = $('#container'); 

var p = (parseInt ($c.css('paddingLeft')) 11 0) + 
(parseInt ($c.css('paddingRight"')) 11 0); 
$('body>.jSscrollPaneContainer') .css({'height': 
Sw-height() + px”, "WidEhva Sw width()y + 有 人世 
sc.css((l"height”: (sw.height (}=py + "px', "width": 
(Suwawidth(}y = ph tt "pe "overflow: auto 这 
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上 述 代 码 第 4 一 9 行 对 滚动 条 设置 宽度 为 15 像素 ， 


$c.jScrollPane (); 
isResizing = false; 
}: 
} 
$ (window) .bind('resize', setContainerHeight); 
setContainerHeight (); 


// 这 里 需要 再 次 调用 获取 容器 高 度 函 数 
setContainerHeight() : 
1);? 
</script> 


滚动 条 使 用 箭头 按钮 ， 按 钮 大 小 为 


16 像素 。 第 12 一 26 行 定义 了 对 浏览 器 添加 自 定义 滚动 条 函数 。 其 中 第 17 行 设 定 浏览 器 窗 
口 可 调整 尺寸 标志 。 第 18 行 获取 浏览 器 窗口 对 象 。 第 19 行 获取 最 底层 容器 层 对 象 。 第 20 
行 获取 文字 内 容 与 边框 之 间 的 距离 。 第 21 行 设 置 滚动 条 的 尺寸 。 第 22 行 设置 容器 层 的 尺 


寸 。 第 23 行 初始 化 滚动 条 。 第 27 


人 文档 中 说 明 这 个 函数 要 调用 两 次 。 效 果 如 图 10.13 所 示 。 


行 绑 定 窗口 的 改变 大 小 事件 。 最 后 调用 添加 自 定义 滚动 


Nam dui enim, fringilla vitae, rhoncus non, pharetra in, nunc. Sed a lectus vel orci bibendum 
placerat. Aliquam erat volutpat. Integer odio. Cum sociis natoque penatibus et magnis dis parturient 
montes, nascetur ridiculus mus. Duis dictum egestas lorem. Donec ultricies volutpat tellus. 
Phasellus justo arcu, pharetra eget, cursus non, consectetuer ac, nunc. Fusce orci tortor, semper 
vel, lacinia vitae, accumsan id, quam. Mauris semper molestie lectus. Duis venenatis erat ultrices 
nisl. 


Morbi augue enim, ultricies nec, lobortis sed, iaculis eu, quam. Class aptent taciti sociosqu ad litora 
torquent per conubia nostra, per inceptos hymenaeos. Curabitur sollicitudin, elit eu porttitor varius, 
tellus velit tristique sem, vitae blandit nisi eros id purus. Nunc non lorem. Nunc blandit purus nec 
nisi. Donec vulputate, uma vel interdum tristique, tellus mauris pretium lacus, quis sodales lectus 
nunc sit amet turpis. Suspendisse potenti. Fusce accumsan. Maecenas aliquam consectetuer 
augue. Fusce est neque. condimentum nec, condimentum vitae, consectetuer ac, tortor. Praesent 
ultricies urna in lectus. Nam erat nunc, yenenatis nec, facilisis sed, feugiat ac, pede. Vivamus 
aliquam aliquet libero. Curabitur dolor nunc, scelerisque at, gravida dignissim, rutrum at, orci 
Maecenas vitae libero id eros rutrum hendrerit. Duis lacinia mauris non erat. Nullam et dolor vel leo 
sollicitudin suscipit. Sed laoreet libero. 


Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
Praesent turpis. Suspendisse molestie, neque non congue ullamcorper, neque sem consequat nisl, 
eget pulvinar odio erat et tellus. Nunc luctus convallis dolor. Nullam non mauris. Etiam nisi magna, 
adipiscing eu, nonummy ac, laoreet nec, est. Pellentesque tristique, est vel condimentum feugiat, 
nisi justo rhoncus pede, in pulvinar mauris lectus vitae dui. Pellentesque scelerisque. Vestibulum 


= 
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图 10.13 自 定 义 浏览 器 窗口 滚动 条 


3. 重新 初始 化 属性 的 应 用 


这 个 示例 使 用 了 插件 的 重新 初始 化 属性 ， 要 实现 当 图 片 加 载 完成 后 再 次 初始 化 操作 。 


加 载 后 ， 需 要 根据 实际 内 容 的 大 小 如 
码 如 下 : 


当 图 片 或 者 内 容 大 小 较 大 时 ， 加 载 时 间 会 有 延迟 ， 因 此 当 图 片 全 部 加 载 完 成 或 者 内 容 全 部 
重新 初始 化 滚动 条 的 大 小 及 滚动 范围 。JavaScript 功能 代 


ss 


第 2 篇 jQuery 实战 开发 与 应 用 


江 <script type="text/JavaScript"> 
pd $ (function() 
3 | 
4 // 一 旦 图 片 被 完全 加 载 ， 则 重新 初始 化 插件 
本 $('#panel') 
6 -jsScrollPane( 
肖 { 
8 showArrows:true, // 显 示 表 示 滑 动 方向 箭头 
9 scrollbarWidth: 20, // 滑 动 条 宽度 
10 reinitialiseOnImageLoad: true 
// 图 片 加 载 后 重新 初始 化 插件 
注入 } 
12 ); 
1 Hs 
14 </script> 


上 述 代 码 第 10 行 就 是 再 次 初始 化 选项 ， 在 这 里 设置 为 真 则 表示 允许 滚动 条 再 次 初始 
化 。 效 果 如 图 10.14 所 示 。 
ee 


(yy ,| DAwriteBookVjQuerySievplugins\scrollBamiE3D ~ 


宽 上 大 关 臣 jscrollPane onImagesLoad example 


jScrollPane reinitialiseOnlmageLoad: example 


This example shows how you can use jScrollPane and it's reinitialiseOnimageLoad parameter so that your jScrollPane 
automatically reinitialises itself once each image inside it loads (and so always reflects the correct height after images are 


jpane1 


图 10.14 ”再 次 加 载 滚动 条 


4. 滚动 事件 举例 


这 个 示例 使 用 了 滚动 条 的 滚动 事件 ， 并 在 这 个 事件 中 添加 了 记录 浏览 器 日 志 的 操作 。 
JavaScript 功能 代码 如 下 : 


<script type="text/JavaScript"> 
$ (function () 
1 
// 简 单 初始 化 插件 
$('#panel') .jScrollPane (); 
$('.scroll-pane') .bind( // 绑 定 滑 动 事件 
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7 "oroll’; 

8 function (event) 

9 | 

10 console.log (event.target); 
LE } 

12 

13 Ws 

14 </script> 


上 述 代 码 第 6 一 12 行 绑 定 了 滚动 条 的 滚动 事件 。 第 7 行 指定 绑 定 事件 。 第 10 行 表示 
在 滚动 事件 发 生 时 记录 浏览 器 日 志 。 效 果 如 图 10.15《〈 此 图 效果 是 在 正 8 中 实现 的 ) 所 示 。 


| | 国 source 回 console] 加 More tools | 过 Clear console 


|conaole [23]= 
[object] 


Console [241= 
好 tobject] 


只 Enter script code to evaluate,… 


CompanionJSs v0.55 


图 10.15 ”利用 深 动 条 滚动 事件 记录 浏览 器 日 志 


5. 滚动 条 编程 设 定 滚动 位 置 


这 个 示例 使 用 了 滚动 条 更 改 滚 动 位 置 的 相关 操作 函数 ， 通 过 编程 动态 修改 滚动 条 位 
置 。 也 可 以 通过 外 界 元 素 的 变化 影响 滚动 条 的 变化 ,更 改 滚动 块 的 位 置 。JavaScript 功能 代 
但 如 下 : 


<script type="text/JavaScript"> 
$ (function () 
{ 
// 分 别 初始 化 三 个 插件 
$('#panel') .jScrollPane() 7 
$('#pane2') .jScrollPane ({showArrows:true}); 
$('#pane3') .jScrollPane ({scrollbarWidth:20, scrollbar-— 
Margin:10, animateTo:true}); 
8 // 初 始 化 页 面 其 他 链接 的 单 击 事件 ， 修 改 滚动 块 的 位 置 
9 $('.scroll-to-demo') .bind( 
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10 
这 下 
12 
13 
14 
15 
16 
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CE 

function() 

{ 
$('#panel') [0] .scrollTo (200); 
return false; 


$('.scroll-by-demo') .bind( 
‘click', 
function() 
{ 
$('#pane2') [0] .scrollBy (parseInt ($ (this). 
mter( rol yy 
return false; 


); 
var $targets = $('#pane3-scroll-targets'); 
var S$pane3 = $('#pane3'); 
var pane3top = parseInt ($pane3.offset () .top); 
$('#pane3 p') .each( 
function (index) 
{ 
$targets.append( 
$('<li></1i>') .append( 
$('<a></a>') 
attr( therer vaScripE sr VEGls 
$ (this) .offset () .top}) 
.text('Scroll to paragraph ' + (index+1)) 
-bind( 
国语 二 
function() 
{ 
Spane3[0] .scrollTo (parseInt 
($ (this) .attr('rel')) - pane3top); 


元 
} 
); 
// 对 第 4 个 插件 设 定 滚动 块 的 编程 改变 位 置 事件 
var Spane4 = $('#pane4'); 
$pane4.jScrollPane ({animateTo:true}); 
$('a.scroll-to-element-demo') .bind( 
A 
function () 
{ 
var targetElementSelectorString = $ (this). 
attr(? rol us 
$pane4[0] .scrollTo (targetElementSelectorString); 
// 设 定 滑动 到 指定 位 置 


return false; 
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3 } 
58 ); 

59| 网 上 

60 </script> 


上 述 代 码 第 5、6、7 行 和 第 49 行 分 别 初始 化 了 4 个 滚动 条 ， 其 中 第 3 个 滚动 条 设 定 
了 滚动 条 宽度 为 20 像素 ， 边 框 间 隔 为 10 像素 ， 使 用 动画 。 第 4 个 滚动 条 也 使 用 了 动画 。 
第 9 一 16 行 设 定 第 1 个 滚动 条 动态 滚动 事件 , 将 滚动 块 定 位 在 200 位 置 。 第 17 一 24 行 设 定 
了 第 2 个 滚动 条 动态 滚动 事件 ， 利 用 链接 元 素 的 单 击 事件 改变 滚动 块 位 置 ， 每 次 都 以 链接 
的 rel 属性 值 为 移动 量 。 

第 25 一 46 行 定义 了 对 第 3 个 滚动 条 的 滚动 触发 事件 ， 并 以 每 一 段落 的 起 始 行 位 置 为 
移动 位 移 量 。 第 48 一 58 行 定义 了 第 4 个 滚动 条 的 滚动 触发 事件 , 移动 的 位 置 是 通过 jQuery 
选择 器 而 不 是 通过 坐标 位 置 定位 的 。 效 果 如 图 10.16 和 图 10.17 所 示 。 


* The following UL will be flled wth raferanc: in #pana3 and wil let you scrall directly to the top of those Ps 
(note that pane3 also has animateTo a Ten is here) 


You can now also provide a reference to an element within your scroll pane to scrollTo - just pass in a jQuery selector string i 
and 并 an element matching that string exists within your scroll pane then the scroll pane will scroll so that element appears at = 
the top: 


图 10.17 ”编程 调用 滚动 方法 效果 二 


.245 . 


第 2 篇 jQuery 实战 开发 与 应 用 


6. 加 入 动画 效果 的 滚动 


这 个 示例 通过 设 定 不 同 的 超 链接 的 单 击 事件 ， 使 对 应 的 滚动 条 以 不 同 的 动画 形式 滚动 
定位 到 不 同位 置 。 深 动 条 动画 效果 的 移动 也 是 一 种 全 新 的 用 户 体验 。JavaScript 功能 代码 
如 下 : 


[1 
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<script type="text/JavaScript"> 
$ (function () 


{ 


DD); 


// 初 始 化 各 个 插件 
// 设 定 动画 间隔 时 间 ， 以 及 动画 移动 时 的 单位 移动 距离 
$('#panel') .jScrollPane ({animateTo:true，animateInterval: 
50, animateStep:5}); 
$('#pane2') .jScrollPane ({animateTo:true, animateInterval: 
50, animateStep:3}); 
$('#pane3') .jScrollPane ({animateTo:true, animateInterval: 
150, animateStep:5}); 
$('#pane4') .jScrollPane ({animateTo:true, animateInterval: 
150, animateStep:3}); 
$('#pane5') .jScrollPane ({animateTo:false}); 
// 超 链接 单 击 事件 ， 触 发 滚动 条 的 动画 移动 效果 
$('a.scroll-to-element-demo') .bind( 
ee 
function() 
{ 
Sthis = $(this) 
var destinationSelector = S$(this) .attr('rel');// 
$('.scroll-pane', $this.parent() .Parent () . 
Parent () ) .each ( 
Eunction() 
{ 
this.scrollTo (destinationSelector); 
// 设 定 滑动 到 指定 位 置 


); 


return false; 


</script> 

上 述 代码 第 4 一 8 行 初始 化 了 5 个 滚动 条 ， 它 们 具有 不 同 的 动画 属性 。 第 9 一 23 行 对 
每 个 滚动 条 都 使 用 了 4 个 超 链接 ， 利 用 超 链接 的 单 击 事件 触发 滚动 条 滚动 ， 并 定位 到 每 个 
段落 的 起 始 位 置 。 静 态 效果 如 图 10.18 所 示 。 
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入 jscrolpane -， + - 
€] DAwriteBookNjQuerysiteplugins\scrollgamiE3O ~|#+| XP Bs Pr 
窒 届 天 惧 jscrollpane -scrollToSpeed demos 
tpane1 pane2 加 pane3 
~ Nam dui enim, fingila 
>p1 - Lorem ipsum dolor sit EE non, pharetra in, >p1 - Lorem ipsum dolor sit 
amet, nunc. Sed a lectus vel orci 
lit. Donec condimentum | placerat Aliquam erat 轩 Celt. Donec condimenium 
nisl. Integer quis tellus nec turpis volutpat. Integer odio. Cum sociis nisl. Integer quis tellus nec turpis 
acus eu risi- 吕 ns 5 | cus eunisi Praesent 
metus sit amet enim. Nam i Wt i metus sit amet enim_ Nam 
sagittis, risus mi tollne Phacollue sagittis, fisus mi 
nec euismod magna libero nec euismod magna libero 
at sem. In enim magna, * Scrol pane to at sem. In enim 
vestibulum et blandit sit amet, “ gg 
» Scroll pane to_p3 a lk 
* Scroll pane to p3 四 
tpane4 pane5 
>p1- Lorem ipsum dolor sit >p1- Lorem ipsum dolor sit 


图 10.18 设置 不 同 动画 效果 的 滚动 条 滚动 静态 效果 


10.3 小 结 


本 章 对 如 何 用 jQuery 创建 滑动 条 进行 了 讲解 。 主 要 内 容 包 括 基 本 滑动 条 实现 原理 、 滑 
动 条 的 事件 过 程 处 理 ， 并 介绍 了 两 个 滑动 条 插件 。 重 点 部 分 是 滑动 条 的 实现 原理 及 滑动 条 
插件 的 使 用 方法 ,滑动 条 的 实现 原理 是 本 章 的 难点 。 下 一 章 将 讲解 jQuery 页 面 编辑 器 插件 。 


10.4 习 题 


【习题 1】 利 用 本 章 所 讲解 内 容 自 定义 实现 横向 滑动 条 。 
【习题 2】 练 习 jScrollPane 插件 的 使 用 方法 。 


.247 . 


第 11 章 ”页面 编辑 器 插件 


页 面 编辑 器 是 在 浏览 器 中 创建 一 个 具有 文本 编辑 功能 、 类 似 文本 编辑 软件 的 区 域 。 这 
种 页 面 效 果 可 以 应 用 于 网 站 论坛 、 网 站 后 台 管 理 、B/S 结构 的 OA 平台 等 CMS。 它 方便 用 
户 在 浏览 器 中 编辑 文章 ， 并 在 编辑 完成 后 直接 发 表 。 本 章 将 介绍 6 个 页 面 编辑 器 插件 。 


11.1 markItUp 插件 


markItUp 插件 是 一 个 轻 量 级 的 、 具 有 客户 定制 并 富有 弹性 的 编辑 引擎 、 面 向 开发 人 员 
的 jQuery 插件 。 它 可 应 用 于 CMS 〈 内 容 管理 系统 ) 、 博 客 、 网 站 论坛 等 。 这 个 插件 的 英 
文 网 址 为 http://markitup.jaysalvat.com/home/， 可 以 在 该 网 址 下 载 插件 文件 、 文 档 及 相关 
示例 。 

该 插件 的 特点 如 下 。 

(1) 可 快捷 地 整合 进 新 的 项 目 中 。 

(2) 支持 键盘 快捷 键 。 

(3) 具有 工具 栏 和 下 拉 菜 单 。 

(4) 灵活 的 客户 定制 。 

(5) 使 用 的 随意 性 。 

(6) Ajax 动态 预览 。 

(7) 可 定制 主题 。 

下 面 就 来 介绍 这 个 插件 的 使 用 方法 。 


11.1.1 安装 插件 
在 安装 过 程 中 , 在 引入 插件 文件 之 前 需要 加 载 jQuery 库 文件 ， 并 在 引入 插件 文件 之 后 


继续 引用 插件 的 配置 文件 ， 如 下 所 示 。 
(1) 引入 JS 文件 : 


<!-- jQuery --> 

<script type=" text/Javascript” sre=™”../::/ /Islib/iquery 1.6:13"></script> 
<l== marktt! -==> 

<script type="text/JavaScript" src="markitup/jquery.markitup.js"></script> 


// 引 入 插件 文件 
(2) 引入 配置 插件 的 JSON 文件 : 
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<!-- markItUp! toolbar settings 一 -> 
<script type="text/JavaScript" src="markitup/sets/default/set.js"></script> 


// 引 入 插件 要 使 用 的 JSON 文件 
(3) 引入 CSS 样式 文件 : 


<!-— markItUp! Skin 一 -> 
<link rel="stylesheet" type="text/css" href="markitup/skins/markitup/ 
style.css" /> 


<!-- markItUp! toolbar skin --> 
<link rel="stylesheet" type="text/css" href="markitup/sets/default/style. 
ne 


(4) 加 入 插件 调用 JavaScript 功能 代码 。 在 调用 插件 初始 化 方法 时 ， 可 以 使 用 元 素 id、 
元 素 的 class、 元 素 标记 和 名: 


<script type="text/JavaScript"> 
&I=— 


$('#markItUp') .markItUp (mySettings);  ”// 初 始 化 插件 
三 = 全 
</script> 


11.1.2 ”键盘 的 使 用 


键盘 的 使 用 主要 有 以 下 儿 种 。 

(1) Ctrl+ 其 他 键 ， 标 记 插入 。 

(2) Shift+ 其 他 键 ， 新 标记 的 插入 。 

(3) Ctrl+Shift+ 其 他 键 ， 在 选中 的 所 有 行 添 加 标记 。 

(4) Alt+ 其 他 键 ， 使 用 可 选 标记 插入 。 

其 中 ，“ 其 他 键 ” 为 除去 Cttl、Shift、Alt 等 键 的 按键 ， 主 要 是 标记 使 用 的 键盘 快捷 操 
作 。 例 如 ， 当 需要 在 编辑 器 内 添加 一 对 粗 体 字 标记 时 ， 可 以 使 用 Ctrl+B 组 合 键 来 操作 。 


11.1.3 ”标记 语言 定制 
标记 语言 定制 主要 设 定 插件 可 以 处 理 的 是 何 种 标记 语言 、 这 种 标记 语言 的 语法 如 何 ， 


以 及 用 户 在 编辑 器 中 插入 该 标记 语言 时 的 行为 特征 等 。 标 记 语 言 定制 包含 若干 属性 ， 如 表 
11.1 所 示 。 


表 11.1 标记 语言 定制 的 属性 说 明 


属 性 说 明 
nameSpace 为 封装 的 DIV 指定 一 个 类 名 ， 避 免 CSS 样式 冲突 
resizeHandle 是 否 允 许 调整 编辑 器 大 小 
previewAutoRefresh 当 编 辑 内 容 改 变 时 ， 是 否 刷新 预览 窗口 
previewParserPath 自 定义 的 预览 语法 分 析 
previewParserVar 发 送 给 语法 分 析 的 内 容 名 称 
previewTemplatePath 页 览 模板 位 置 


.249 . 


第 2 篇 jQuery 实战 开发 与 应 用 


属 性 类 型 说 明 
previewParser 函数 预览 前 分 析 内 容 的 语法 函数 
previewPosition 字符 串 预览 窗口 的 位 置 
onEnter 定义 当 回 车 键 按 下 时 的 操作 
onCtrlEnter 定义 当 Ctrl 和 回 车 键 同 时 按 下 时 的 操作 
onShiftEnter 定义 当 Shift 和 回 车 键 同 时 按 下 时 的 操作 
onTab 定义 当 Tab 键 按 下 时 的 操作 
beforeInsert 函数 定义 在 插入 标记 前 执行 的 函数 
afterInsert 函数 定义 在 插入 标记 后 执行 的 函数 
markupSet 标记 集合 操作 为 编辑 器 设置 属性 


markupSet 中 的 属性 说 明 如 表 11.2 所 示 。 
表 11.2 markupSet 中 的 属性 说 明 


属 性 类 型 说 了 明 
name 字符 串 按钮 名 称 
classname 字符 串 按钮 应 用 的 类 名 
key 字符 串 按钮 对 应 的 快捷 键 
openWith 字符 串 或 函数 在 选择 位 置 前 标记 添加 
closeWith 字符 串 或 函数 在 选择 位 置 后 标记 添加 
replaceWith 字符 串 或 函数 在 鼠标 或 选择 位 置 蔡 换 文本 
openBlockWith 字符 串 或 函数 在 完整 的 块 前 加 入 文本 
closeBlockWith 字符 串 或 函数 在 完整 的 块 后 加 入 文本 
mutiline 布尔 标记 是 否 插 入 每 一 行 或 者 一 个 完整 的 块 
placeHolder 字符 串 或 函数 占 位 符 文 本 被 插入 
beforeInsert 函数 标记 插入 前 被 调用 的 函数 
afterInsert 函数 标记 插入 后 被 调用 的 函数 
beforeMutiInsert 函数 多 行 标记 插入 前 调用 的 函数 
afterMutiInsert 函数 多 行 标记 插入 后 调用 的 函数 
dropMenu 打开 下 拉 菜 单 的 按钮 


下 面 用 一 个 示例 来 介绍 这 个 插件 的 使 用 方法 。 这 个 示例 主要 是 想 介 绍 初始 化 插件 时 如 
何 通 过 配置 文件 配置 插件 样式 及 功能 。 在 这 个 示例 中 使 用 了 插件 的 开始 标记 、 结 束 标记 、 
填充 文本 内 容 等 行为 属性 ， 以 及 如 何 通 过 插件 内 置 删 除 函 数 在 页 面 中 删除 插件 效果 。 下 面 
看 一 下 JavaScript 的 功能 代码 : 


1 <script type="text/JavaScript"> 

RR 
2 $ (document) .ready (function() { 

// 添 加 插件 及 应 用 配置 信息 

//$('textarea') .markItUp( { Settings }, { OptionalExtraSettings } ); 
3 $('#markItUp') .markItUp (mySettings); 
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// 可 以 在 任何 位 置 添加 任意 内 容 
//$.markItUp( { Settings } ); 


4 $('.add') .click(function() { 
5 $.markItUp( { openWith:'<opening tag>"v 
6 CloseWith:"<closing tag>'"v 
4 placeHolder:"New content" 
8 } 
9 i 
10 return false; 
Wl Lae 
// 在 任意 时 刻 添加 或 者 删除 插件 效果 
//$ (textarea) .markItUPRemove () 7 
12 $('.toggle') .click(function() { 
3 if ($("#markItUp.markItUpEditor") .length === 1) { 
14 $("#markItUp") .markItUPRemove (); 
15 $("span", this) .text("get markItUp! back"); 
16 } else { 
E> $('#markItUp') .markItUp (mySettings); 
18 $("span", this) .text("remove markItUp!"); 
二 9 } 
20 return false; 
2 hy 
2 
> 
23 </scripE> 
上 述 代码 第 3 行 初始 化 了 这 个 页 面 编辑 器 , 其 中 利用 了 setjs 文件 中 的 设置 内 容 。 第 4 一 


11 行 是 向 编辑 器 中 添加 带 有 标记 的 文本 。 第 5 行进 行 编辑 器 的 参数 设 定 ， 设 定 文本 内 容 的 
起 始 标记 。 第 6 行 设 定 文本 内 容 的 结束 标记 。 第 7 行为 文本 占 位 符 ; 第 12 一 21 行 ， 设 定 对 
编辑 器 的 添加 与 删除 操作 。 第 13 行 判定 页 面 中 是 否 已 经 存在 编辑 器 。 第 14、15 行 表示 如 
果 存 在 编辑 器 则 删除 ， 并 修改 单 击 元 素 的 文本 。 第 17、18 行 表 示 如 果 页 面 中 不 存在 编辑 器 
则 创建 ， 同 时 修改 单 击 元 素 的 文本 。 

为 了 对 上 面 讲解 的 编辑 器 的 相关 属性 有 所 了 解 ， 下 面 来 看 一 下 如 何 对 编辑 器 进行 常用 
配置 ， 以 setjs 文件 为 例 。 


1 var mySettings = { 
2 onShiftEnter: {keepDefault:false, replaceWith:'<br />\n'}, 


3 onCtrlEnter: {keepDefault:false, openWith:'\n<p>', closeWith: 
'</p>"}, 

4 onTab: {keepDefault:false, replaceWith:" 4 

5 ImarkupSet: [ 

6 {name:'Bold', key:'B', openWith:'(!(<strong>|!|<b>)!)', closeWith: 
ustrong>lt lz/ 

{name:'Italic', key:'I', openWith:'(! (<em>|!|<i>)!)', closeWwith: 
/ome ls /> 

8 {name:'Stroke through', key:'S', openWith:'<del>', closeWith: 
'</del>' }, 

9 TSenarmAaLoOre So | 
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10 {name:'Bulleted List', openWith:" <1i>', closeWith:"'</1i>"',multi— 
line:true, openBlockWith:'<ul>\n', closeBlockWith:"'\n</ul>'}, 

:hl {name: 'Numeric List', openWith:" <l1i>', closeWith:"'</1i>', multi— 
line:true, openBlockWith:'<ol>\n', closeBlockWith:"'\n</ol1>'}, 

hb tseparator: "=============== 

3 {name:'Picture', key:'P', replaceWith:"'<img src="[![Source:!:http: 
//1!']" alt="[![Alternative text]!]" />"' }, 

14 {name:'Link', key:'L', openWith:'<a href="[! [Link:!:http: 


//1!]"(! (title="[! [Title] !]")')>', closeWith:'</a>', placeHolder: 
our toxt to linokse” }, 


15 {separator:" -—" }, 

16 {name:'Clean', className:'clean', replaceWith:function (markitup) 
{ return markitup.selection.replace(/<(.*?)>/g, "") } }, 

hd {name:'Preview', className:'preview', call:'preview'} 

8 ] 

4 


上 面 这 段 JavaScript 代码 是 编辑 器 的 属性 设 定 内 容 。 第 2 行 对 Shift 和 回 车 键 同时 按 下 
取消 默认 操作 ， 在 编辑 器 中 使 用 <br /> 来 代替 。 第 3 行 对 Ctrl 和 回 车 键 同 时 按 下 取消 默 
认 操 作 ， 在 编辑 器 中 使 用 段落 标记 来 代替 。 第 4 行 对 Tab 键 的 按 下 取消 默认 操作 ， 使 用 4 
个 空格 代替 。 第 6 行 定 义 添 加 粗 体 字 标记 按钮 。 第 7 行 定 义 添 加 斜体 字 标记 按钮 。 第 8 行 
定义 添加 删除 线 标记 按钮 。 

第 9 行 定 义 分 隔 线 样式 。 第 10 行 定义 添加 无 序列 表 样 式 标记 按钮 。 第 11 行 定 义 添加 
有 序列 表 样 式 标 记 按钮 。 第 12 行 定 义 分 隔 线 样式 。 第 13 行 定 义 添 加 图 片 元 素 标记 按钮 。 
第 14 行 定义 能 够 添加 超 链接 元 素 标 记 按 钮 。 第 15 行 定 义 分 隔 线 样式 。 第 16 行 定 义 清空 前 
后 标记 按钮 功能 。 第 17 行 定 义 展现 预览 视图 。 效 果 如 图 11.1 和 图 11.2 所 示 。 
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全 i FE markitUp! Universal markup editor 


Bl | 二 友 -| 属 - 四 一 -他 太 
<hl>Welcome on markItUp!</hi> 
<p><strong>markItUp!</strong> is a JavaScript plugin built on the jQuery library. It allows 
You to turn any textarea into a markup editor. Html, Textile, Wiki Syntax, Markdown, BBcode or 


even your own markup systen can be easily implenented.</p> 
New conrentkbr /> 


Support the project : Donate | Contact 


图 11.1 markItUp 编辑 器 样式 
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“着 nanaup Universal Markup editor — WIndows Trternet Ecplorer OOD9 lb | 


De |€] OMWrtegooijQuerysite\plugins\PageEditors\mardtUAD 


俩 物 本 天 着 marktUp! Universal markup editor 


| | 


Welcome on markItUp! | 
markItUp! is a JavaScript plugin built on the jQuery library. It allows you to turn any textarea into a markup editor. | 
Html, Textile, Wiki Syntax, Markdown, BBcode or even your own markup system can be easily implemented. | 
New content | 
| 

| 
引 
Support the project : Donate | Contact = j 


图 11.2 markItUp 预览 样式 


11.2 jwysiwyg 插件 


jwysiwyg 插件 是 一 个 所 见 即 所 得 的 jQuery 页 面 编辑 器 。 使 用 这 个 编辑 器 需要 引用 
jQuery 1.3.2 以 后 版 本 ， 还 需要 jQuery.ULDialog 和 jQuery.ULResizable 库 文 件 。 这 个 插件 


的 英文 网 址 为 http://github.com/akzhan/jwysiwyg。 


11.2.1 jwysiwyg 插件 基本 介绍 


这 个 插件 主要 通过 配置 属性 与 函数 来 控制 它 的 工作 ， 有 具体 属性 说 明 如 表 11.3 所 示 。 


表 11.3 jwysiwyg 插 件 的 属性 说 明 


属 性 类 型 说 明 
html 字符 串 在 编辑 器 内 的 HIML 源 代码 
debug 布尔 是 否 可 以 调试 
css 字符 串 编辑 器 使 用 的 CSS 样式 文件 的 路 径 
autoGrow 布尔 框架 尺寸 自动 增长 
autoSave 布尔 是 否 自 动 保存 
a 大 东 如 果 为 真 ,在 正中 插入 <br> 用 于 创建 
新 行 
formHeight 整 型 对 话 框 的 高 
formWidth 整 型 对 话 框 的 宽 
iFrameClass 字符 串 使 用 的 下 rame 的 样式 类 
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属 性 类 型 默 认 值 说 明 


<p>Initial 
Content</p> 


initialContent 字符 串 编辑 器 的 初始 内 容 


自动 增长 的 最 大 高 度 
编辑 器 可 接收 的 最 多 字符 个 数 ， 但 不 
包括 HIML 标记 

自 定义 的 消息 内 容 


IaxHeight 整 型 


maxLength 整 型 


messages jQuery 对 象 ， 形 式 为 键 / 值 对 


plugins 插件 使 用 基本 设置 

Rb 是 否 自 动 加 载 默认 插件 对 象 ， 或 者 
autoload 布尔 或 者 对 象 指定 其 他 加 载 对 象 
il8n 布尔 或 者 对 象 是 否 适 用 国际 化 ， 也 可 指定 语言 对 象 


rmMSWordMarkup | 布尔 是 否 移 除 MS Word 标记 
toolbarHtml 字符 串 HIML 源 代 码 
resizeOptions 布尔 


允许 编辑 器 调整 大 小 
移 除 标题 

是 否 移 除 未 在 控制 属性 集合 中 未 启 
用 的 功能 人 2 11:5) 


在 
在 


是 
removeHeadings 布尔 是 
让 


rmUnusedControls | 布尔 


rmUnwantedBr 布尔 是 否 添加 <br> 标 记 
tableFiller 字符 中 | | 添加 表格 时 单元 格 中 的 默认 文本 
为 插件 指定 事件 ， 键 为 事件 名 ， 值 为 
韦 件 对 | 入 
events 事件 对 象 | 回调 函数 
controls 对 象 | | 功能 按钮 集合 


插件 具有 内 置 函 数 ， 为 我 们 操作 插件 提供 了 方便 ， 如 表 11.4 所 示 。 
表 11.4 jwysiwyg 插 件 的 内 置 函 数 说 明 


函 数 说 明 
addControl(name,settings) 添加 控制 按钮 
clear 清除 内 容 
createLink(szURL) 创建 超 链接 
destroy 销毁 编辑 器 对 象 
document 编辑 器 中 的 文档 
getContent 获取 编辑 器 内 容 
insertImage(szURL,attribute) 插入 图 片 
insertTable(colCount,rowCount.filler) 添加 表格 
removeFormat 移 除 格式 
save 存储 编辑 器 中 文本 的 改变 
selectAll 选中 编辑 器 中 所 有 内 容 
setContent 设置 编辑 器 中 文本 内 容 


编辑 器 中 包含 一 些 控制 器 按钮 ， 为 用 户 提供 文本 编辑 操作 ， 效 果 图 11.3 是 常用 按钮 样 
式 。 按 钮 说 明 如 表 11.5 所 示 。 
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B 7 人 咏 Ui 必 大 硬 误 沽 几 吾 天 区 环 由 局 | 三 三 册 ie 
三 画 蛋 国 iuiere| X 
图 11.3 常用 功能 按钮 
表 11.5 “jwysiwyg 插 件 的 按钮 说 明 
按钮 说 明 按钮 说 明 
bold 粗 体 字 insertHorizontalRule | 插入 水 平 线 
italic 斜体 字 createLink 创建 超 链接 
strikeThrougn 删除 线 insertImage 插入 图 片 
underline 下 划 线 hl 添加 hl 标题 
justifyLeft 左 对 齐 h2 添加 h2 标题 
justifyCenter 居中 对 齐 h3 添加 h3 标题 
justifyRight 右 对 齐 paragraph 添加 段落 或 者 h1 一 h6 标题 
justifyFull 全 对 齐 cut 剪 切 
indent 文本 缩 进 copy 复制 
outdent 文本 突出 paste 粘贴 
Subscript 文本 下 标 increaseFontSize 字号 变 大 
supscript 文本 上 标 decreaseFontSize 字号 变 小 
undo 撤销 操作 html 文本 区 域 的 HTML 源 代码 
redo 重 做 removeFormat 移 除 所 有 格式 
insertOrderedList 插入 有 序列 表 insertTable 插入 表格 
insertUnorderedList 插入 无 序列 表 


如 果 在 下 环境 


下 面 通过 示例 ， 学 习 如 何 使 用 该 插件 。 本 书 所 有 的 效果 图 都 是 基于 IE8 的 ， 这 个 插件 
下 使 用 ， 需 要 打开 jquery.wysiwyg.css 文件 ， 将 jquery.wysiwyg.gif 修改 为 


jquery.wysiwyg.no-alpha.gif， 才 能 看 到 正常 效果 。 


11.2.2 ”基本 应 用 


载 J 


这 个 示例 使 用 了 不 带 任何 参数 设置 的 初始 化 参数 。 在 这 里 使 用 默认 编辑 器 的 形态 ， 加 


常用 按钮 ， 使 用 基本 功能 。 在 HTML 文件 头 部 分 需要 引入 下 列 文件 。 


<link rel="stylesheet" type="text/css" href="../lib/blueprint/screen.css" 

media="screen, projection" /> 

<link rel="stylesheet" type="text/css" href="../lib/blueprint/print.css" 

media="print" /> 

<!--[if lt IE 8]><link rel="stylesheet" href="../lib/blueprint/ie.css" 

type="text/css" media="screen, projection" /><![endif]-—> 

<link rel="stylesheet" href="../../jquery.wysiwyg.css" type="text/css"/> 
// 插 件 的 css 文件 

<script type="text/JavaScript" src="../lib/jquery.js"></script> 

<script type="text/JavaScript" src="../../jquery.wysiwyg.js"></script> 
// 插 件 文件 

<script type="text/JavaScript" src="../../controls/wysiwyg.image.js"></script> 
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// 插 件 图 片 操作 文件 

<script type="text/JavaScript" src="../../controls/wysiwyg.link.js"></script> 
// 插 件 链接 操作 文件 

<script type="text/JavaScript" src="../../controls/wysiwyg.table.js"></script> 
// 插 件 表格 文件 

JavaScript 功能 代码 相对 简单 : 

1 <script type="text/JavaScript"> 

区 (function($) { 

$ $ (document) .ready (function() { 

2 $('#wysiwyg') .wysiwyg();  ”// 插 件 初始 化 

5 ]) 7 

6 1}) (jQuery); 

TT7> </acript> 


第 4 行 调用 插件 初始 化 函数 。 效 果 如 图 11.4 所 示 。 


(se 到 | 
x 器 "| 四 Debuggar 售 " | 四 | 国 -| & "| :| 叫 


JWYSIWYG | 


[Example: Basic 


ISU 
王国 同 国 mmww X 


Initial content | 


器 


4 = » | 


瑟 105% ~ 


图 11.4 jwysiwyg 插件 的 基本 应 用 效果 


11.2.3 ”全 功能 编辑 器 

这 个 示例 在 插件 初始 化 过 程 中 将 插件 所 支持 的 功能 全 部 加 载 。 这 里 使 用 了 前 面 介绍 的 
关于 插件 中 添加 标记 按钮 的 属性 ， 并 为 一 些 标记 属性 〈 如 标题 按钮 ) 指定 了 依据 不 同 浏览 
器 实现 功能 的 样式 ， 以 及 插件 的 单 击 实现 效果 。JavaScript 功能 代码 如 下 ;: 
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<script type="text/JavaScript"> 
(function($) { 
$ (document) .ready (function() { 
$('#wysiwyg') .wysiwyg ({ // 配 置 插件 所 有 功能 
econtrolss { 

bold so vible » truc > 
italde st visable = true } 
underline : { visible : true }, 
strikeThrough : { visible : true }, 
justifyLeft Evilbleo trus Fr 
justifyCenter : { visible : true }, 
justifyRight : { visible : true }, 
justifyFull : { visible : true }, 
indent : { visible : true }, 
outdent : { visible : true }, 
subscript : { visible : true }, 
superscript : { visible : true }, 
undo : { visible : true }, 
redo : { visible : true }, 
insertOrderedList : { visible : true }, 
insertUnorderedList : { visible : true }, 
insertHorizontalRule : { visible : true }, 
h4: { 

visible: true, 

className: "h4'"， 

command: ($.browser.msie || $.browser.safari) ? 


"formatBlock' : 


arguments: ($.browser.msie || $.browser.safari) ? '<h4>' : 'h4', 


tags: [ha], 


tooltip: "Header 4 


] 
SR 本 

visible: true, 

"BD 

($ .browser.msie 
'formatBlock' : 


className: 
command: 


11 
'heading', 


arguments: ($.browser.msie || $.browser.safari) ? "<h5>'" : 'h5°', 


tagqst [ho 


tooltip: "Header 5" 


}, 
6s 


visible: true, 


'heading', 


$.browser.safari) ? 
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44 className: "h6'"， 
45 command: ($.browser.msie || $.browser.safari) ? 
'formatBlock' : 'heading', 
46 arguments: ($.browser.msie || $.browser.safari) ? "<h6>' : 'h6°', 
47 tagse evs 
48 tooltip: 'Header 6" 
49 }, 
50 
pl cut 2 wisible =: true. } 
瑟 肥 copy : { visible : true }, 
53 paste : { visible : true }, 
54 html : { visible: true }, 
5 increaseFontSize : { visible : true }, 
56 decreaseFontSize : { visible : true }, 
Ey exam html: { 
58 exec: function() { 
59 this.insertHtml ('<abbr title="exam">Jam</abbr>'); 
60 return true; 
61 }, 
62 Visible: true 
63 } 
64 二 
65 events: { 
66 click: function (event) { // 插 件 单 击 事件 
67 if ($("#click-inform:checked") .length > 0) { 
68 event .preventDefault (); 
69 alert ("You have clicked jWysiwyg content!"); 
70 
3. } 
2 } 
73 人 
74 $('#wysiwyg') .wysiwyg ("insertHtml", "Sample code"); 
// 设 定 插件 内 文本 内 容 
75 1); 


76 }) (jQuery); 
77 </script> 


上 述 代 码 第 5 行 开 始 设 定编 辑 器 的 控制 按钮 功能 。 第 6 一 25 行 设 定 粗 体 、 和 斜体 、 下 划 
、 删 除 线 、 左 对 齐 、 右 对 齐 、 居 中 对 齐 、 全 对 齐 、 内 缩 进 、 外 突出 、 上 标 、 下 标 、 取 消 、 
三 做 、 有 序列 表 插 入 、 无 序列 表 插 入 、 水 平 线 等 按钮 全 部 显示 。 

第 26 一 33 行 设 定 <h4> 标 题 按 钮 相关 属性 ， 按 钮 可 见 ， 样 式 类 名 为 4， 如 果 当 前 是 正 
浏览 器 则 人 如 果 当 前 浏览 器 是 Safari 浏览 器 则 为 标题 ， 如 果 当 前 浏览 

器 是 正 浏览 器 则 参数 内 容 为 <h4>， 如 果 当 前 浏览 器 是 Safari 浏览 器 则 为 hh4， 标 记 [h41]， 
具 提 示 'Header 4。 第 34 一 41 行 设 定 <h5> 标 题 按钮 相关 属性 。 


站 


由 
时 
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第 42 一 49 行 设 定 <h6> 标 题 按钮 相关 属性 ， 相 关内 容 和 <h4> 的 设 定 类 似 。 第 1 一 56 行 
设 定 剪 切 、 复 制 、 粘 贴 、HITML 源 代 码 、 字 体 放 大 、 字 体 缩小 按钮 全 部 显示 。 第 37 一 63 
行 设 定 exam html 按钮 的 功能 , 向 文本 部 分 添加 HIML 代码 <abbr title="exam">Jam</abbr>， 
按钮 可 见 。 第 65 一 72 行 添加 编辑 器 文本 部 分 单 击 事件 , 如 果 选 中 复 选 框 则 单 击 文本 的 时 候 
跳出 信息 提示 对 话 框 。 
效果 如 图 11.5 和 图 11.6 所 示 。 
Te) 


ia Er 
| x 乱 -| 同 DebugBar Ca EA FEIEIE 


Example: Full 


BJUSi 匡 秦 汤 而 | 汪 台 | X%x DC = 
CE WT ME 


| ample codeInitial content 


图 11.5 全 功能 编辑 器 


Re na l=le lz | 
(2 SD DAWriteBooliQu P ~ OX | @ Example: ml-jwvs- 
x 医 "| 回 Debugear 仿 " | 回 | 加 -| 了 -| 257|[ 林 
Example: Full 站 


B /Si 证 雪 法 量 ) 殖 有 | Xx DC 汪汪 | 三 
轩辕 鲁 Hmmm 才 O 从 和 XI 


图 11.6 单 击 文本 跳出 提示 对 话 框 
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11.2.4 ”可 调整 大 小 的 编辑 器 


这 个 示例 利用 了 jQuery UI 库 的 调整 元 素 大 小 的 库 文件 ， 并 对 jwysiwyg 插件 的 相关 属 
性 进行 了 调整 , 设 定 了 插件 的 可 调整 大 小 属性 , 但 是 要 在 HTML 文件 头 部 多 引入 jQuery UI 
库 文件 : 

<script type="text/JavaScript" src="../lib/ui/jquery.ui.core.js"></script> 

<script type="text/JavaScript" src="../lib/ui/jquery.ui.widget.js"></script> 


<script type="text/JavaScript" src="../lib/ui/jquery.ui.mouse.js"></script> 
<script type="text/JavaScript" src="../lib/ui/jquery.ui.resizable.js"></script> 


JavaScript 代码 如 下 : 


1 <script type="text/JavaScript"> 

2 (function ($) { 

3 $ (document) .ready (function () { 

4 $('#wysiwyg') .wysiwyg ({ 
resizeOptions: {}, // 调 整 插件 大 小 选项 
6 controls: { 

html: { visible: true } 
8 } 

9 Ts 

10 3 

11 }) (jQuery); 

12: </script> 


上 述 代 码 第 5 行 设 定编 辑 器 可 调整 大 小 ， 在 编辑 器 的 右 下 角 能 看 到 调整 大 小 的 箭头 。 
效果 如 图 11.7 和 图 11.8 所 示 。 


一 过 = 
9 国 ] DAWritegookYQu P ~ © X | Example: Resizable 


x 器 -| 回 Debugeor 令 -| 日 | 呈 "| 2 -| 


JjWYSIWYG 


Example: Resizable 


B15SU 天 训导 淄 3 


Et 三 汪 j 到 
王国 周全 me cyX 


[Initial content 


图 11.7 编辑 器 原始 尺寸 
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Initial content 


图 11.8 调整 大 小 后 效果 


11.2.5 ”编辑 器 内 容 的 左右 移动 


这 个 示例 在 编辑 器 的 控制 按钮 集合 中 加 入 了 左右 移动 按钮 ， 可 以 使 编辑 器 内 容 从 左边 
框 移 至 右边 框 , 也 可 反方 向 移动 。 实 际 上 这 里 使 用 了 插件 中 内 容 的 左右 对 齐 属性 。JavaScript 
代码 如 下 : 


1 <script type="text/JavaScript"> 

区 (function ($) { 

3 $ (document) .ready (function () { 

4 $('#wysiwyg') .wysiwyg ({ 

5 controls: { 

6 rtl: { visible: true }, // 左 对 齐 功 能 可 见 
EE ltr: { visible: true } // 右 对 齐 功能 可 见 
8 
9 


DD); 
10 ]) 7 
11 }) (jQuery); 
12 </script> 


上 述 代 码 第 6、7 两 行 设 定 了 Right to Left 和 Left to Right 按钮 为 显示 状态 。 效 果 如 图 
11.9 和 图 11.10 所 示 。 


11.2.6 根据 内 容 自动 调整 大 小 的 编辑 器 


这 个 示例 使 用 了 编辑 器 的 自动 增长 属性 ， 使 编辑 器 可 以 根据 内 容 自 动 增长 。 这 里 使 用 
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了 前 面 介绍 的 自动 增长 属性 及 最 大 高 度 属性 。JavaScript 代码 如 下 : 


局] DAWriteBooRjQu P ~ OX | @ Example: Enable RT.. 
上 x 医 "| 加 Debugear 会 -| 日 | 国 -| 2 -| :7 | lo 
| 


jWYSIWYG 


Example: Enable RTL 


Lx ED El 
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图 11.10 编辑 器 内 容 左 右 移动 按钮 效果 二 
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1 <script type="text/JavaScript"> 

区 (function ($) { 

局， $ (document) .ready (function () { 

4 $('#wysiwyg') .wysiwyg ({ 

5 autoGrow: true，// 插 件 可 自动 增长 

6 maxHeight: 600 // 插 件 最 大 高 度 为 600 像素 
7 ns 

8 人 

9 1}) (jQuery); 

10 </script> 


上 述 代码 第 5 行 设 定编 辑 器 可 自动 增长 ， 第 6 行 限制 了 自动 增长 的 最 大 高 度 为 600。 


效果 如 图 11.11 所 示 。 
[< 站 闻 DAWriteBookjQu P OX 下 FF 


x 蔓 -| 国 DebugBar 今 " | 回 | 加 "| 2 -| sj|l 


Example: AutoGrow 


Initial content 


图 11.11 自动 增长 大 小 的 编辑 器 


11.2.7” 自 定义 功能 控制 按钮 


这 个 示例 使 用 了 可 以 自 定义 功能 的 控制 按钮 ， 这 个 按钮 的 功能 是 在 编辑 器 内 容 中 添加 
引号 。 这 里 添加 了 一 个 自 定义 的 内 缩 进 标记 按钮 ， 并 使 用 了 blockquote 标记 包装 我 们 选择 
的 文本 。JavaScript 代码 如 下 : 


1 <script type="text/JavaScript"> 

2 (function($) { 

3 $ (document) .ready (function() { 

4 $ ("textarea") .wysiwyg ({ 

3 rmUnusedControls: true, // 隐 藏 不 使 用 的 按钮 
6 


controlsa 4 
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了 bold: { visible : true }, // 粗 体 功能 

8 html: { visible : true }, //HTML 源 代码 查看 功能 

9 insertOrderedList: { visible : true }，// 插 入 有 序列 表 功 能 

10 removeFormat: { visible : true } // 移 除 原 有 格式 功能 

Wl 

12 1D); 

和 $ ("input[name=add] ") .click (function () { 

1 $ ("textarea") .wysiwyg ("addControl", "quote", { 

i groupIndex: 2, 

16 icon: './../tests/images/quote02.gif"', 

下 允 tooltip: "Quote'， 

18 tags: ['blockquote'], 

19 exec: function () { 

20 var range = this.getInternalRange(), 

之 二 common = range.commonAncestorContainer, 

22 blockquote = this.dom.getElement ("blockquote"); 
// 如 果 选 中 的 是 文本 内 容 ， 则 使 用 标记 对 其 进行 包装 

要 3 if (common.nodeType === 3) { 

24 common = common.parentNode; 

} 

26 if (blockquote && $ (blockquote) .hasClass ("quote")) { 

27 $ (common) .unwrap (); 

28 } 

29 else { 

30 if ("body" !== common.nodeName.toLowerCase()) { 

3 $ (common) .wrap ("<blockquote class='quote' />"); 

32 1 

33 } 

34 }, 

35 callback: function (event, Wysiwyg) { 

36 alert ("callback triggered!"); 

37 } 

38 

39 ]) 7 

40 $ ("input [name=makeBold]") .click(function () { 

41 $ ("textarea") .wysiwyg ("triggerControl", "bold"); 

42 过 

43 ]) 7 


44 }) (jQuery); 


45 </script> 


上 述 代 码 第 5 行 设 定 不 使 用 的 按钮 不 显示 。 第 7 一 10 行 设 定 使 用 粗 体 、 查 看 HTML 源 
代码 、 插 入 有 序列 表 、 移 除 格式 等 功能 按钮 。 第 13 行 设 定 当 点 击 添加 新 控制 的 时 候 会 在 编 
辑 器 的 工具 栏 上 添加 一 个 实现 <blockquote> 标 记 的 按钮 ， 选 中 内 容 并 单 击 这 个 按钮 ， 会 产 
生 右 缩 进 效 果 。 效 果 如 图 11.12 和 图 11.13 所 示 。 
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图 11.12 添加 右 缩 进 功能 按钮 
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图 11.13 ”使 用 右 缩 进 功能 按钮 


11.3 ”HtmlBox 插件 


HtmlBox 插件 是 一 个 跨 浏览 器 、 交 互 式 、 开 源 的 、 所 见 即 所 得 的 jQuery 编辑 器 。 这 个 
插件 安装 简单 直观 ， 配 置 方便 ， 适 用 于 CMS、 论 坛 、 用 户 留 言 、 联 系 信息 等 应 用 。 它 的 英 


文 网 址 为 http://remiya.com/htmlbox/。 
"3 
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HtmlBox 插件 的 特点 如 下 。 


(1) 
(2) 
(3) 
(4) 
(5 
(6) 
(7) 


易 整 合 。 

多 浏览 器 支持 。 
占用 空间 小 。 
XHTML 输出 。 
支持 Ajax。 

更 换 外 观 方便 。 
自 定义 图 标 。 


下 面 介绍 这 个 插件 的 基本 使 用 方法 。 


11:3.4 


如 何 安装 


插件 的 安装 实际 就 是 插件 文件 的 引入 。 在 引入 这 个 插件 之 前 同样 需要 先 引入 jQuery 库 
文件 。 这 个 插件 使 用 的 jQuery 库 文件 版 本 较 低 。 


(1) 


引入 JS 文件 : 


<script language="JavaScript" 
JavaScript"></script> 
<script language="JavaScript" 


src="jquery-1.3.2.min.js" type="text/ 


src="htmlbox.colors.js" type="text/ 


JavaScript"></script> // 插 件 颜 色 操作 文件 
<script language="JavaScript" src="htmlbox.styles.js" type="text/ 
JavaScript"></script> // 插 件 样式 操作 文件 
<script language="JavaScript" src="htmlbox.syntax.js" type="text/ 
JavaScript"></script> // 插 件 语法 检查 文件 
<script language="JavaScript" src="xhtml.js" type="text/JavaScript"> 
</script> //XHtml 标准 文件 
<script language="JavaScript" src="htmlbox.min.js" type="text/ 
JavaScript"></script> // 插 件 核 心 文件 

(2) 创建 一 个 文本 区 域 ; 

<textarea id='ha'></textarea> 

(3) 设置 运行 插件 的 属性 特点 。 属 性 的 使 用 方法 参考 下 面 介绍 的 示例 。 

11.3.2 属性 特点 


在 运行 插件 时 需要 对 插件 进行 初始 化 ， 即 配置 运 


区 行 属性 ， 如 表 11.6 所 示 。 


表 11.6 ”HtmlBox 属 性 说 明 


属 性 说 明 
需要 使 用 图 片 的 路 径 位 置 , 可 以 是 
idir 绝对 路 径 ， 也 可 以 是 相对 URL 
地 址 
about 是 否 使 用 about 说明 对 话 杠 
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属 ”性 说 明 
icons 设置 需要 使 用 的 图 标 
skin 字符 串 default 设置 皮肤 样式 
toolbars ["bold","italic","underline"] 设置 工具 栏 内 容 
output xhtml 设置 是 哪 种 输出 内 容 标 准 
ee body {margin: en ye 设置 使 用 的 CSS 样式 
font-size:11;}p {margin:0px;} 
toolbar height 工具 栏 的 高 
tool height 整 型 工具 的 高 
tool width 整 型 工具 的 宽 
tool image height | 整 型 工具 栏 上 图 片 的 高 
tool image width 工具 栏 上 图 片 的 宽 
success EE function(data) {alert(data):;} 个 成 功 的 :A 和 0 调用 妈 辐 局 油 用 
的 函数 
error 图 当 function(a,b,c) {retum this;} 当 Ajax 调用 出 错时 调用 的 函数 


11.3.3 ”内 置 函数 


HtmlBox 通过 内 置 函数 实现 特定 功能 ， 如 表 11.7 所 示 。 


表 11.7 HtmlBox 内 置 函 数 


函 数 说 明 
返回 编辑 器 中 内 容 的 HTML 源 代码 ， 如 果 xhtmljs 被 引入 ， 则 返回 XHTML 源 
get_html0 代码 
get_textO) 返回 在 HTML 标记 中 的 文本 内 容 
set_text() 设置 编辑 器 中 的 文本 


使 用 get 方式 利用 Ajax 向 服务 器 提交 编辑 器 中 的 数据 ， 如 果 data 为 空 ， 则 使 用 


get(url,data) get_text0 获 取 数据 
使 用 post 方式 利用 Ajax 向 服务 器 提交 编辑 器 中 的 数据 ， 如 果 data 为 空 ， 则 使 用 
post(url,data) get_text0 获 取 数 据 
success(fn) 如 果 上 两 个 方法 成 功 返回 ， 则 使 用 函数 处 理 ， 默 认 警 告 浏览 返回 
error(fn) 如 果 Ajax 返回 失败 ， 则 使 用 函数 处 理 
cmd(cmd,arg) 执行 一 个 指定 的 命令 
change(fn) 文本 改变 时 使 用 对 应 函数 处 理 
remove() 移 除 编辑 器 实例 


wap_tags(start,end) | 在 选中 的 文本 外 包 右 标记 


11.3.4 ”编辑 器 可 使 用 的 工具 


HtmlBox 可 支持 的 对 文本 进行 加 工 的 工具 如 表 11.8 所 示 。 
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表 11.8 HtmlBox 工 具 说 明 


工 县 说 明 说 明 

cut 从 编辑 器 中 剪 切 选中 文本 到 剪 切 板 中 选中 文本 分 散 对 齐 

copy 从 编辑 器 中 复制 选中 文本 到 剪 切 板 中 选中 行 添加 有 序列 表 
paste 粘贴 剪 切 板 中 的 内 容 到 编辑 器 的 光标 处 选中 行 添加 无 序列 表 
bold 将 选中 的 文本 改 成 粗 体 选中 文本 右 缩 进 

italic 将 选中 的 文本 改 成 斜体 outdent 选中 文本 突出 

underline | 在 选中 的 文本 下 添加 下 划 线 hyperlink 在 选中 文本 上 创建 超 链接 
strike 在 选中 的 文本 上 添加 删除 线 i 插入 图 片 

sup 将 选中 的 文本 改 成 上 标 形式 显示 HTML 代码 

sub 将 选中 的 文本 改 成 下 标 形式 fontsize 改变 选中 文本 的 字号 大 小 
left 左 对 齐 选中 文本 fontfamily 改变 选中 文本 的 字体 
right 右 对 齐 选 中 文本 fontcolor 改变 选中 文本 的 字体 颜色 


11.3.5 ”插件 应 用 举例 


(1) 全 功能 编辑 器 。 这 个 示例 使 用 了 编辑 器 的 所 有 工具 功能 。 这 里 使 用 了 插件 的 工具 
条 属性 , 并 在 该 属性 中 设 定 了 常用 工具 按钮 , 同时 设 定 了 插件 的 外 观 颜色 为 蓝 色 。JavaScript 
代码 如 下 : 

1 <script language="JavaScript" type="text/JavaScript"> 

2 $("#ha") .css("height","100%") .css ("width","100%") .htmlbox ({ 


3 toolbars:[ 

中 [ 

9 // 前 切 、 复 制 、 粘 贴 功 能 

6 "separator", "cut", "copy", "paste", 

// 撤 销 、 重 做 功能 

8 "separator", "undo", "redo", 

9 // 粗 体 字 、 斜 体 字 、 下 划 线 、 删 除 线 、 上 标 、 下 标 功能 

10 "separator”, "bold” "italic"y "nderline" "strikea" "soap Sub", 
ul // 左 对 齐 、 右 对 齐 、 居 中 对 齐 、 两 端 对 齐 功能 

全 党 "separator", "justify","left","center", "right", 
03 // 有 序列 表 、 无 序列 表 、 缩 进 、 突 出 功能 

14 "separator", "ol", "ul", "indent", "outdent", 

1 // 超 链接 、 移 除 超 链 接 、 图 片 功 能 

16 "separator", "link", "unlink", "image" 

3 

18 | 

19 [// 显 示 代 码 

20 "separator" "code", 

21 // 格 式 化 、 字 号 大 小 、 字 体 集 、 字 体 颜色 、 高 亮 功 能 

22 "separator", "formats", "fontsize", "fontfamily", 
23 "separator", "fontcolor", "highlight", 

24 了 

25 [ 

26 // 移 除 格式 、 去 除 标 记 、 分 隔 线 、 段 落 功 能 

这 "separator", "removeformat", "striptags", "hr", "paragraph", 
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28 // 引 号 、 样 式 、 语 法 功能 


29 "separator", "quote", "styles", "syntax™" 
30 ] 

3 

32 skin:"blue" // 皮 肤 颜色 为 蓝 色 

33 1); 


34 </script> 


上 述 代 码 第 2 行 设 定编 辑 器 的 大 小 , 并 调用 HtmlBox 初始 化 函数 。 第 3 行使 用 toolbars 
添加 工具 集 。 第 4~31 行将 前 面 介绍 的 工具 添加 到 工具 栏 上 。 其 中 有 些 工具 在 表 11.8 中 没 
有 介绍 ，separator 表示 不 同 工 具 之 间 的 分 隔 线 ，unlink 表示 取消 超 链接 ，removeformat 表 
示 删 除 原 有 格式 ，striptags 表示 去 除 标 记 ，hr 表示 添加 分 隔 线 ，paragraph 表示 添加 段落 
quote 表示 突出 选中 内 容 ，style 表示 CSS 样式 设 定 ，syntax 表示 编程 语言 语法 。 第 32 行 表 
示 插 件 使 用 蓝 色 为 主 色调 。 效 果 如 图 11.14 所 示 。 


rs- 7 -SR -mr- - -OF 
ET -TS > -STA 


! HtmlBox 


LU | mm me 


图 11.14 全 功能 HtmlBox 编辑 器 


(2) 添加 新 功能 编辑 器 。 这 个 示例 添加 了 新 的 图 标 和 图 标 对 应 的 功能 。 这 个 插件 同样 
可 以 添加 自 定义 的 工具 按钮 并 设 定 它们 的 功能 。 新 功能 的 定义 在 插件 初始 化 的 工具 栏 设 定 
中 完成 。JavaScript 代码 如 下 : 


1 <script language="JavaScript" type="text/JavaScript"> 
2 varhb icon set default = $("#htmlbox icon set default") .css("height", 
"100") .css ("width","600") .htmlbox({ 

3 toolbars:[ 

4 ["cut", "copy", "paste", "separator dots","bold","italic","underline", 
strike” SeDarato > "sub "soup "separator dots" "undo "Eedo 
"separator dots","]left","center","right","justify","separator dots", 
"ol", "ul", "indent", "outdent", "separator dots","]link", "unlink", "image"], 


5 ["code", "removeformat","striptags","separator dots","quote", 
"paragraph", "hr", "separator dots", 
6 {icon: "new.gif",tooltip:"New",command:function() {hb icon 
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10 ]， 


set default.set text("<p></p>");}}, 


// 新 增 内 容 功能 


{icon:"open.gif",tooltip:"Open",command:function() {alert 


('Open')}}, 


// 打 开 操 作 功能 


{icon:"save.gif",tooltip:"Save",command:function() {alert 


('Save')}} 
] 


11 icons:"default", 
12 skin:"default" 


13 }) 7 


14 </script> 


// 保 存 操作 功能 


上 述 代码 的 第 2 行 和 上 面 的 例子 类 似 ， 向 工具 栏 中 添加 工具 按钮 。 第 6 行 是 新 添加 一 


段 。 第 7 行 添加 模拟 打开 功能 。 第 8 行 添加 模拟 保存 功能 。 效 果 如 图 11.15 一 图 11.17 所 示 。 
着 Html8ox- Demo D internet Explorer | 
2 2 rr me 


“0 
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| 轨 了 *w 国 有 9 洁 J 如 a 


This Htmlsox uses te default Icon Set HtmlBox 


Blue Skin 


六 加 隐 B TU 要 浊 国 三 汪 主 刘 锡 过 国名 
和 


This Htmlsox uses the default tcon Set HtmlBox 


图 11.15 添加 新 功能 的 编辑 器 
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图 11.16 模拟 打开 功能 
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图 11.17 模拟 保存 功能 


11.4 Lightweight RTE 插件 


Lightweight RTE 插件 也 是 jQuery 的 富 文本 编辑 器 。 它 也 是 


一 个 轻 量 型 的 插件 ， 易 于 


扩展 ， 为 不 同 的 设计 模式 和 资源 模式 设 定 不 同 的 工具 栏 。 它 的 英文 介绍 网 址 为 http://code. 
google.com/p/lwrte/。 下 面 首先 介绍 一 下 这 个 插件 的 相关 函数 及 说 明 ， 如 表 11.9 所 示 。 


函数 
get_content() 
set_content(content) 
get_select text() 


表 11.9 Lightweight RTE 函 数 说 明 


说 了 明 
返回 当前 编辑 器 内 容 
设置 内 容 到 编辑 器 


获取 选中 文本 ， ns 


get_select html0 


获取 选中 文本 ， 包 含 标记 内 容 ， 只 工作 在 设计 模式 


selection replace_with(html) 
editor_cmd(command,args) 


enable_design mode() 


ea 
在 设计 模式 下 执行 内 建 命令 ， 携 带 参数 ， 工 作 在 设计 模式 
启用 设计 模式 


disable_design mode(submit) 


create _toolbar(controls) 


关闭 设计 模式 ， 如 果 参 数 为 false， 则 创建 新 的 文本 域 ， 从 浮动 框 
架 复 制 内 容 ， 删 除 浮动 框架 ， 如 果 参 数 为 tue， 则 创建 新 的 隐藏 
域 ， 并 提交 浮动 框架 的 文本 内 容 
创建 工具 栏 ， 通 过 控制 工具 集合 


create_panel(title,width) 


创建 面板 ， 可 以 指定 标题 ， 宽 度 参 数 


get toolbar0 


获得 当前 活动 的 工具 栏 


activate toolbar(editortb) 
toolbar_click(obj,control) 


移 除 编辑 器 原 有 工具 栏 ， 插 入 参数 tb 所 代表 的 工具 栏 
工具 栏 上 控制 按钮 的 单 击 事件 ， 执 行 按钮 所 包含 的 执行 代码 
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函数 


get selection range() 


说 明 
返回 当前 选中 内 容 的 范围 对 象 ， 工 作 在 设计 模式 
返回 当前 鼠标 所 在 HTML 标记 元 素 ， 工 作 在 设计 模式 
标记 工具 栏 中 的 控制 按钮 只 对 设计 内 容 中 的 被 选中 的 HIML 的 
DOM 节点 (node)〉 起 效 ， 工 作 在 设计 模式 


下 面 看 一 下 这 个 插件 的 示例 , 这 里 使 用 了 插件 初始 化 函数 , 并 设 定 了 插件 的 基本 样式 ， 
加 载 了 插件 的 基本 控制 按钮 和 HTML 标记 处 理 按钮 。JavaScript 代码 如 下 : 


1 <script type="text/JavaScript" src="jquery.js"></script> 
2 <script type="text/JavaScript" src="jquery.rte.js"></script> 
// 插 件 核心 功能 文件 
3 <script type="text/JavaScript" src="jquery.rte.tb.js"></script> 
// 插 件 附加 功能 文件 
4 <script type="text/JavaScript" src="jquery.ocupload-1.1.4.js"></script> 
5 <script type="text/JavaScript"> 
6 $ (document) .ready (function() { 


get_ selected element() 


set_selected_controls(node, controls) 


var arr = $('.rtel').rte({ 

8 css: ['default.css'], // 上 默认 样式 设 定 
9 controls rte: rte toolbar, // 使 用 工具 条 
10 controls html: html toolbar // 使 用 HTML 工具 条 
al 有 

过 下 全 和 2 区 全 全 全 

13 css: ['default.css'], 

14 width: 450, 

LS height: 200, 

16 controls rte: rte toolbar, 

17 controls html: html toolbar 

18 9 

19 ])2 


20 </script> 


上 述 代码 第 2、3 行 是 插件 的 库 文件 。 第 7、12 行 是 插件 的 初始 代码 。 第 8、13 行 是 
插件 的 样式 设 定 默认 样式 。 第 14、15 行 设 定 了 第 二 个 编辑 器 的 初始 大 小 。 第 9、16 行 设 定 
了 编辑 器 的 工具 栏 。 第 10、17 行 设 定 了 编辑 器 设计 模式 下 的 工具 栏 。 效 果 如 图 11.18 所 示 。 
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图 11.18 ”Lightweight RTE 插件 效果 
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L135 水 结 


文本 编辑 器 是 一 个 良好 的 用 户 体验 形式 。 本 章 主要 介绍 了 文本 编辑 器 插件 的 使 用 方 
法 。 重 点 内 容 是 插件 的 功能 与 外 观 定制 , 同时 这 部 分 也 是 本 章 的 难点 。 下 一 章 将 介绍 jQuery 
多 媒体 插件 的 使 用 。 


11.6 习 题 


【习题 1】 练 习 markItUp 插件 的 使 用 方法 。 
【习题 2】 练 习 jwysiwyg 插件 的 使 用 方法 。 
【习题 3】 练 习 Lightweight RTE 插件 的 使 用 方法 。 


= 和 


第 12 章 多 媒 体 


在 现在 的 网 页 中 除了 文字 与 静态 图 片 外 ， 还 有 各 种 媒体 播放 形式 ， 如 MP3、Flash、 
Windows Media Player、Real Player、Silverlight 等 。jQuery 也 有 相应 的 插件 播放 这 些 多 媒 
体 文件 。 多 媒体 插件 除了 播放 各 种 媒体 文件 功能 外 , 还 加 入 了 jQuery 所 特有 的 一 些 动画 特 
效 ， 更 吸引 用 户 。 本 章 将 介绍 3 个 jQuery 多 媒体 插件 。 


12.1 jQuery.Flash 插件 


jQuery.Flash 是 基于 jQuery 插件 的 JavaScript 代码 。 它 的 英文 网 址 是 http://jquery. 
lukelutman.com/plugins/flash/index.html。 该 插件 主要 是 为 了 解决 Flash 在 Web 页 面 的 嵌入 
式 解 决 方案 ,与 AC_RunActiveContent、SWFOjbect 功能 类 似 ， 但 是 该 插件 有 更 多 的 优点 。 

(1) 完全 W3C 标准 。 

(2) 稳定 的 交互 性 。 

(3) 使 用 简单 ， 易 于 扩展 。 

(4) 轻 量 型 ， 功 能 强大 。 

下 面 通过 4 个 示例 来 介绍 这 个 插件 的 使 用 方法 。 


12.1.1 基本 Flash 文件 说 入 


这 个 示例 使 用 了 插件 的 src、width、height 属性 ， 分 别 表 示 Flash 文件 位 置 及 播放 窗口 
的 宽 和 高 。 其 中 ，HTML 代码 和 CSS 样式 设 定 请 参考 光盘 内 容 。 具 体 JavaScript 功能 代码 
如 下 : 

1 <script type="text/javascript" src="../../jslib/jquery-1.6.js"></script> 

2 <script type="text/javascript" src="JS/jquery.flash.js"></script> 


// 添 加 插件 文件 
3 <script type="text/javascript"> 
4 $ (document) .ready (function (){ 
5 $('#example') .flash ({ // 插 件 初始 化 
6 src: 'MediaFile/example.swf', // 指 定 播 放 的 多 媒体 文件 
7 width: 360, // 插 件 的 显示 宽度 
8 height: 215 // 插 件 的 显示 高 度 
9 }, 
10 { 
2 version: 8 // 播 放 文件 的 版 本 


12 1D); 


3) 

14 </script> 
上 述 代码 第 5 行 是 插件 的 初始 化 函数 ， 第 11 行 表 示 Flash 版 本 。 效 果 如 图 12.1 所 示 。 
| la 
< DD owriteBooliQu PD- O EE 


x 散 -| 加 DebugBar 全- | 目 | 加 -| Z -| 2-| 


(hello ) ({ 
src: ‘hello.swf 


) 


图 12.1 基本 Flash 文件 岩 入 


12.1.2 “Flash 替换 文本 内 容 


这 个 示例 中 使 用 HTML 页面 上 的 文本 作为 参数 ， 传 递 Flash 文件 ， 并 在 原文 本 位 置 播 
放 Flash。 其 中 , 使 用 到 了 插件 的 样式 设 定 参数 src、flashvars 属性 、Flash 运行 参数 。HTML 
代码 和 CSS 样式 设 定 请 参考 光盘 内 容 。 具 体 JavaScript 功能 代码 如 下 : 


1 <script type="text/javascript"> 

有 $ (document) .ready (function(){ 

3 $('h3') .flash( 

六 { 

5 src: 'MediaFile/itc century.swf', 

6 flashvars: { 

流 引导 

8 J color: #6666667 Ts 

9 'a { color: #0055CC; text-decoration: none; }', 
10 "a:hover { text-decoration: underline; }' 
1 ].join(" ') 

到 } 

13 RR 

14 { version: 7 }, 

15 function(htmlOptions) { // 添 加 文本 显示 功能 
16 htmlOptions.flashvars.txt = this.innerHTML; 

于 水 this .innerHTML = '<span>'+this.innerHTML+'</span>'; 
18 var S$alt = $(this-firstChild)> 

19 htmlOptions .height = Salt-height (); 

20 htmlOptions.width = $alt.width(); 

a SalltoaddClasas tT alt 


"ys 
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22 $ (this) 

23 -addClass('flash-replaced') 

24 .Prepend($.fn.flash.transform(htmlOptions)); 
25 } 

26 和 

Zs 


28 </script> 


上 述 代 码 第 6 行 设 定 插件 的 Flash 参数 。 第 7 一 11 行 设 定 文本 显示 样式 。 第 14 行 设 定 


Flash 版 本 。 第 15 一 25 行 添 加 HTML 文本 传 入 并 设 定 
显示 样式 。 其 中 第 16 行将 h3 内 肉 套 的 内 容 作 为 Flash 
参数 的 文本 内 容 传 入 插件 的 HIML 选项 参数 。 第 17 
行 向 h3 内 嵌 套 <span> 标 记 。 第 18 行 获取 <span> 标 记 对 
象 ， 第 19、20 行 向 Flash 传 入 文本 所 占 的 高 和 宽 。 第 
21 行 向 <span> 标 记 添加 CSS 样式 。 第 23 行 向 h3 添加 
CSS 样式 。 第 24 行 向 Flash 传送 参数 对 象 。 效 果 如 图 
12.2 所 示 。 


12.1.3 MP3 播放 示例 


> ee 
= pAwriteBoorQu 2 - 0 x | 


x 器 "| 辐 Debugsar 仿 "| 马 | 加 -| 


John Lennon (Wikipedia Page) 
Paul McCartney 

George Harrison 

Ringo Starré 


图 12.2 Flash 替换 文本 内 容 


这 个 插件 除了 可 以 播放 Flash 文件 外 ， 还 可 以 播放 MP3 音频 文件 。 在 本 示例 指定 了 向 
插件 传 入 的 参数 是 MP3 音频 文件 类 型 ， 并 指定 了 文件 位 置 。HTML 代码 和 CSS 样式 设 定 


请 参考 光盘 内 容 。 具 体 JavaScript 功能 代码 如 下 : 


1 <script type="text/javascript" src="../../jslib/jquery.js"></script> 
2 <script type="text/javascript" src="JS/jquery.flash.js"></script> 


3 <script type="text/javascript"> 


4 $ (document) .ready (function(){ 

5 $('a[l@href$="mp3"] ') .flash( 

6 { src: 'MediaFile/singlemp3player.swf', height: 20, width: 100 }, 
学 Tversion 7 村。 

8 function (htmlOptions) { // 添 加 超 链接 功能 

9 Sthis = $(this); 

10 htmlOptions.flashvars.file = $this.attr('href'); 

bs S$this.before($.fn.flash.transform(htmlOptions)); 

2 1 

3 JE i 

Te Em 


15 </script> 


上 述 代码 第 5 行 指定 超 链接 标记 中 的 资源 类 型 为 MP3 i‖ 2 
音频 文件 ， 并 调用 插件 初始 化 函数 。 第 6 行 指定 资源 位 置 ，| 宇和 wp 


上 上 = 


上 一 一 一 
Lucy In The Sky With Diamonds 


Lucy In The Sky With Diamonds 
a 


以 及 播放 的 高 和 宽 。 第 7 行 指定 Flash 版 本 。 第 10 行 指定 Laer a The SR/ Wn De 
向 Flash 传 入 参数 的 文件 类 型 参数 为 超 链 接 的 地 址 属性 值 。 

第 11 行将 HTML 参数 属性 传递 给 插件 。 效 果 如 图 12.3 太 100% ~ 
所 示 。 图 12.3 MP3 播放 示例 效果 
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12.1.4 ”使 用 内 联 样式 设 定 插件 播放 


这 个 示例 在 HTML 标记 的 rel 属性 内 设置 插件 播放 参数 ， 并 在 插件 初始 化 过 程 中 设 定 
对 应 参数 。HTML 代码 和 CSS 样式 设 定 请 参考 光盘 内 容 。 具 体 JavaScript 功能 代码 如 下 : 


1 <script type="text/javascript"> 


加 $ (document) .ready (function(){ 
3 $('1i').flash(null, { version: 8 }, function(htmlOptions) { 
// 通 过 自 定义 方法 代替 静态 参数 设 定 播放 


ownanou 心 


LL 多 
E20 


var Sthis = $(this); 
var params = $this.attr('rel'’) .split(':"'); 


htmlOptions.src = params[0]; // 播 放 文件 位 置 
htmlOptions.width = params [1]; // 显 示 宽 度 
htmlOptions.height = params[2]; // 显 示 高 度 
this.innerHTML = '<div class="alt">'+this.innerHTML+'</div>'; 
// 内 联 文 本 
S$this.addClass('flash-replaced') .Prepend($.fn.flash.transform 
(htmlOptions)); // 添 加 样式 和 播放 参数 


13 </script> 


上 述 代码 第 3 


行 指定 在 列表 项 上 加 载 插件 并 初始 化 ， 对 于 插件 样式 并 没有 设置 ， 直 接 


指定 Flash 版 本 。 第 4 行 获取 列表 项 对 象 。 第 5 行将 列表 项 中 rel 属性 中 的 值 分 隔 。 第 6 行 
设 定 播放 Flash 文件 位 置 。 第 7、8 行 设 定 插件 的 宽 和 高 。 第 10 行 向 插件 传递 参数 。 效 果 
如 图 12.4 和 图 12.5 所 示 。 


逢 无际 是 文 档 - Windows Intemet Explorer 


一 
个 ) | 已 DAWriteBoolAjQuerySitevpluginsVMedia\E30 -| 4 | xX 


) 


Chello ) ( 


STc: ‘hello.swf 


图 12.4 内 联 样式 播放 一 


“ITs 
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}) 


jPlayer 插件 和 前 面 讲 


(‘hello') | 
Src: 'hello.swf 


图 12.5 内 联 样式 播放 二 


12.2 jPlayer 插件 


的 jQuery.Flash 插件 类 似 ， 也 是 一 个 媒体 播放 插件 。 因 为 这 个 插 


件 的 最 新 版 是 基于 HTML 5 标准 的 , 因此 我 们 将 正 8 升级 为 下 9 来 查看 插件 效果 。 这 个 插 
件 的 英文 网 址 为 http://www.jplayer.org/。 下 面 看 一 下 它 的 特点 。 


(1) 易于 使 用 和 发 布 。 


(2) 方便 通过 HTML 和 CSS 定制 插件 样式 。 


(3) 轻 量 型 插件 。 
(4) 免费 ， 开 源 。 


(5) 多 种 解码 ， 跨 平台 


口 。 


12.2.1 jPlayer 插件 基本 介绍 


在 前 面 介绍 其 他 插件 


对， 很 多 插件 在 初始 化 时 都 有 相应 属性 选项 设 定 。 同 样 ， 这 个 插 


件 也 有 相应 的 属性 选项 定义 ， 如 表 12.1 所 示 。 


表 12.1 jPlayer 插 件 属性 说 明 


属 性 说 明 
ready 指定 加 载 的 资源 文件 ， 以 备 插 件 播放 
指定 插件 需要 播放 的 Flash 文件 的 提取 路 径 ， 可 以 根据 
We S 需要 更 改 为 其 他 路 径 
solution "html, flash" 定义 解决 方式 的 主 次 顺序 ， 可 以 按照 要 求 颠倒 顺序 
supplied "mp3" 提供 给 插件 的 文件 格式 
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续 表 
属 性 默 认 值 说 ” 明 
preload "metadata" 预 加 载 ， 可 以 为 "none", "metadata”"” 和 "auto" 
volume 0.8 定义 初始 化 播放 音量 ， 从 0 至 1 
muted false 定义 初始 化 静音 状态 
backgroundColor "#000000" 背景 色 
和 定义 所 有 CSS 样式 选择 器 的 上 层 选 择 器 ， 通 常 使 用 ID 
cssSelectorAncestor "##p_interface_1" 选择 器 
插件 使 用 的 CSS 选择 器 对 象 ， 有 默认 的 一 组 CSS 选 

cssSelector {cssSelectors} 择 器 
idPrefix "jp" 在 插件 内 使 用 的 HTML 元 素 ID 的 前 级 
errorAlerts false 是 否 使 用 错误 报告 
wamingAlerts false 是 否 使 用 警告 报告 
eventType undefined 负责 绑 定 处 理 函数 的 事件 类 型 ， 参 考 表 12.2 

表 12.2 jPlayer 插 件 事件 说 明 

事 件 说 了 明 

event 标准 插件 事件 属性 
event.jPlayer 插件 的 信息 对 象 
event.jPlayer.error 插件 的 错误 事件 对 象 
event.jPlayer.error.type 插件 的 错误 事件 对 象 类 型 
event.jPlayer.error.context 发 生 错 误 的 原因 
event.jPlayer.error.message 描述 错误 的 消息 
event.jPlayer.error.hint 修正 错误 的 建议 
event.jPlayer .flash 关于 Flash 解决 方式 的 信息 
event.jPlayer.html 关于 HTML 解决 方式 的 信息 
event.jPlayer.status 插件 状态 
event.jPlayer.status.sre 在 插件 中 使 用 的 URL 地 址 
event.jPlayer.status .file 设置 媒体 内 容 时 ， 代 表 媒 体 对 象 文件 
event.jPlayer.status.seekPercent 可 查找 的 百分比 


event.jPlayer.status.currentPercentRelative 


当前 查找 时 间 的 百分比 


event.jPlayer.status.currentPercentAbsolute 


当前 持续 时 间 百 分 比 


event.jPlayer.status.currentTime 


eventjPlayer.status.duration 


以 秒 为 单位 表示 当前 时 间 
多 媒体 文件 的 总 播放 时 间 


event.jPlayer.status.volume 插件 音量 
event.jPlayer.status.muted 插件 是 否 静 音 
event.jPlayer.status.srcSet 多 媒体 资源 是 否 被 设置 
event.jPlayer. status.paused 是 否 暂 停 
event.jPlayer.status.waitForPlay 是 否 等 待 播放 
event.jPlayer.status.waitForLoad 是 否 等 待 加 载 
event.jPlayer. status.video 是 否 是 视频 
event.jPlayer.status.width 插件 样式 的 宽 
event.jPlayer.status.height 插件 样式 的 高 
event.jPlayer.version 插件 版 本 


ss 
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事 件 说 明 
event.jPlayer.version.script 插件 使 用 的 JavaScript 脚本 语言 版 本 
event.jPlayer.version flash 插件 使 用 的 Flash 版 本 
event.jPlayer.version.needFlash 和 JavaScript 兼容 的 Flash 版 本 
event.jPlayer.warning 插件 的 警告 信息 对 象 
eventjPlayer.waming.type 插件 的 警告 类 型 
event.jPlayer.warning.context 警告 原因 
event.jPlayer.warning.message 描述 警告 的 消息 
eventjPlayer.warning .hint 避免 警告 的 建议 


插件 内 置 了 相关 方法 供 我 们 调用 来 操作 播放 过 程 ， 如 表 12.3 所 示 。 
表 12.3 jPlayer 插 件 方法 说 明 
方法 形式 说 明 
定义 播放 的 多 媒体 文件 ， 这 个 方法 需要 放 在 其 他 方法 之 前 , 包 
$(id).jPlayer( "setMedia", Object media ) | 含 的 多 媒体 类 型 有 : mp3、m4a、m4v、oga、ogv、webma、 
webmv、wav、poster 


$(id).jPlayer( "clearMedia" ) 清除 多 媒体 ， 停 止 播 放 
$(id).jPlayer( "load" ) 在 播放 前 预 加 载 多 媒体 文件 


$(id).jPlayer( "play", [Number: time] ) 播放 多 媒体 ， 参 数 time 表示 从 指定 位 置 播放 ， 时 间 单 位 为 秒 
暂停 多 媒体 播放 ， 参 数 time 表示 在 指定 位 置 暂 停 ， 时 间 单 位 


$(1d).jPlayer( "pause", [Number: time] ) 


为 秒 
$(id).jPlayer( "pauseOthers" ) 暂停 其 他 的 多 媒体 播放 
$(id).jPlayer( "stop" ) 停止 多 媒体 播放 
SGO)jPIayer( playHead”， Number | 移动 播放 位 置 到 进度 条 的 指定 位 置 
percentOfSeekable ) 
$Gid)jPlayer( "volume", Number: ratio ) “| 媒体 播放 音量 
$(id).jPlayer( "mute" ) 静音 操作 
$(id).jPlayer( "unmute" ) 取消 静音 操作 


$(id).jPlayer( "option", [String: key, 
[Variable: value]] ) 
$(id).jPlayer( "destroy" ) 移 除 插件 


下 面 通 过 示例 来 介绍 这 个 插件 的 使 用 方法 。 


设置 插件 配置 信息 


12.2.2 jPlayer 插件 基本 使 用 方式 : 播放 音频 文件 


这 个 示例 使 用 了 插件 的 基本 事件 和 方法 ， 包 括 一 些 基本 属性 的 使 用 。 首 先 ， 需 要 创建 
HTML 静态 页 面 。 
和 <div class="jp-audio"> 


之 <div class="jp-type-single"> 


“0 
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<div id="jp interface 1" class="jp-interface"> 

4 <ul class="jp-controls"> 

5 <li><a href="#" class="jp-play" tabindex="1">play 
</a></1i> 

6 <li><a href="#" class="jp-pause" tabindex="1">pause 
</a></1i> 

这 <li><a href="#" class="jp-stop" tabindex="1">stop 
</a></1i> 

8 <li><a href="#" class="jp-mute" tabindex="1">mute 
</a></1i> 

9 <1i><a href="#" class="jp-unmute" tabindex="1">unmute 
</a></1i> 

10 </ul> 

于 <div class="jp-progress"> 

12 <div class="jp-seek-bar"> 

和 3 <div class="jp-play-bar"></div> 

14 </div> 

5 </div> 

16 <div class="jp-volume-bar"> 

于 <div class="jp-volume-bar-value"></div> 

18 </div> 

a <div class="jp-current-time"></div> 

20 <div class="jp-duration"></div> 

2 </div> 

22 <div id="jp Playlist 1" class="jp-playlist"> 

23 <ul> 

24 <1i>Bubble</1i> 

25 </ul> 

26 </div> 

2 </div> 

28 </div> 


上 述 代码 中 使 用 了 插件 的 内 置 CSS 样式 选择 器 ，“jp-type-single” 表 示 单 一 控件 样式 ， 
“jp-interface ”表示 插件 界面 样式 ，“jp-controls” 表 示 插 件 的 控制 面板 样式 ，“jp-play” 表 
示 插 件 播 放 按 钮 样式 ，“jp-pause ”表示 插件 暂停 按钮 样式 ，“jp-stop” 表 示 插 件 停止 按钮 
样式 , “jp-mute” 表 示 静 音 按 钮 样式 , “jp-unmute” 表 示 取 消 静音 按钮 样式 ，“jp-progress” 
表示 插件 播放 进度 底层 DIV 样式 。 
“jp-seek-bar” 表 示 播 放 定 位 栏 样式 ，“jp-play-bar” 表 示 播 放 栏 样式 ，“jp-volume-bar” 
表示 音量 显示 样式 ，“jp-volume-bar-value ”表示 当前 音量 值 显示 样式 ，“jp-current-time” 
表示 当前 播放 时 间 显示 样式 ，“jp-duration ”表示 完整 播放 时 间 显 示 样 式 ，“jp-playlist” 
表示 播放 曲目 列表 显示 样式 。 
接 下 来 看 一 下 实现 播放 功能 的 JavaScript 代码 : 
1 <link href="skin/jplayer.blue.monday.css" rel="stylesheet" type= 
"text/ecss" /> 

2 <script src="MediaFiles/html5.js"></script> 

3 <script type="text/javascript" src="../../../jslib/jquery-1.6.min.js"> 
“Lacript> 


4 <script type="text/javascript" src="js/jquery.jplayer.min.js"></script> 
5 <script type="text/javascript"> 


“2 
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//<I[CDRTRAT[ 
6 $ (document) .ready (function(){ 


TL $("#jquery jplayer 1") .jPlayer({ 
8 ready: function () { 
9 $ (this) .jPlayer ("setMedia", { // 设 置 多 媒体 播放 参数 
10 m4a: "MediaFiles/Miaow-07-Bubble.m4a", //m4a 文件 
11 oga: "MediaFiles/Miaow-07-Bubble.ogg" //oga 文 件 
12 }) .jPlayer ("play"); // 调 用 播放 动作 
下 }, 
14 ended: function (event) { // 结 束 事件 
15 $ (this) .jPlayer ("play"); 
16 }, 
17 swfPath: "js", 
18 supplied: "m4a, oga" 
19 1D); 
ZO0 有 区 
> 


21 </script> 


上 述 代码 第 7 行 调用 插件 初始 化 函数 。 国 IECTTTTECIETETZZ 


[es Pe | so | 100%| 


第 8 行使 用 了 插件 的 准备 事件 。 第 9 一 12 行 
设 定 了 向 插件 中 添加 多 媒体 文件 , 并 调用 插 
件 的 播放 方法 。 第 14、15 行使 用 了 插件 的 
结束 事件 ， 同 样 调用 了 插件 的 播放 方法 。 第 
17 行 指定 插件 需要 使 用 的 Flash 文件 路 径 。 
第 18 行 指定 了 插件 使 用 的 多 媒体 文件 类 
型 。 效 果 如 图 12.6 所 示 。 


图 12.6 插件 的 基本 使 用 方式 〈 音 频 ) 示例 效果 


12.2.3 jPlayer 插件 基本 使 用 方式 : 播放 视频 文件 


这 个 示例 使 用 了 插件 的 基本 事件 和 方法 ， 包 括 一 些 基本 属性 的 使 用 。 这 个 示例 的 静态 
页 面 与 上 例子 类 似 ， 在 此 不 过 多 讲解 。 不 同 于 上 面 的 例子 的 是 ， 这 里 是 一 个 视频 文件 的 播 
放 。 下 面 看 一 下 JavaScript 功能 代码 : 


1 <script type="text/javascript"> 
//<! [CDATA[ 

2 $ (document) .ready (function(){ 

$("#jquery jplayer 1").jPlayer({ 

a ready: function () { 

5 $ (this) .JjPlayer("setMedia", { 

6 m4v: "MediaFiles/Big Buck Bunny Trailer 480x270 
h264aac.m4v", 


ogv: "MediaFiles/Big Buck Bunny Trailer 480x270.0gv", 

8 poster: "MediaFiles/Big Buck Bunny Trailer 480x270. 
png™ 

a 1); 

10 }, 

站 ended: function (event) { 

2 $ (this) .jPlayer ("play"); 
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1 
14 
15 
16 
坟 


18 


}, 
swfPath: "js", 
supplied: "m4v, ogv" 
1D); 
5 
人 > 
</script> 


上 述 代码 和 前 一 个 例子 基本 相同 ， 只 是 在 加 入 多 媒体 文件 时 指定 了 不 同文 件 类 型 。 效 


果 如 图 


12.7 所 示 。 


Sa tameilo 


EN 2 Gl 


加 © ,一 


Big Buck Bunny Trailer 


图 12.7 插件 的 基本 使 用 方法 (视频 ) 示例 效果 


12.2.4” 自 定义 播放 器 操作 


在 
每 个 播 
HIML 


未 
2 
3 
4 
5 
6 
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这 个 示例 中 , 在 页 面 上 添加 了 两 个 插件 ,一 个 播放 视频 文件 , 另 一 个 播放 音频 文件 。 
放 器 都 加 载 了 多 个 文件 ， 在 播放 器 的 事件 操作 代码 中 进行 了 重新 定义 。 首 先 ， 建 立 


<div class="jp-video jp-video-270p"> 
<div class="jp-type-playlist"> 
<div id="jquery jplayer 1" class="jp-jplayer"></div> 
<div id="jp interface 1" class="jp-interface"> 
<div class="jp-video-play"></div> 
<ul class="jp-controls"> 
<li><a href="#" class="jp-play" tabindex="1">play 
</a></1i> 
<li><a href="#" class="jp-pause" tabindex="1">pause 
</a></1i> 
<li><a href="#" class="jp-stop" tabindex="1">stop 


ss 
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</a></1i> 

10 <li><a href="#" class="jp-mute" tabindex=" 
</a></1i> 

汪汪 <li><a href="#" class="jp-unmute" tabindex="1">unmute 
</a></1i> 

bz <li><a href="#" class="jp-previous" tabindex="1"> 
previous</a></1i> 

13 <li><a href="#" class="jp-next" tabindex="1">next 
</a></1i> 

14 </ul> 

15 <div class="jp-progress"> 

16 <div class="jp-seek-bar"> 

冰 了 <div class="jp-play-bar"></div> 

18 </div> 

让 </div> 

20 <div class="jp-volume-bar"> 

2 <div class="jp-volume-bar-value"></div> 

22 </div> 

3 <div class="jp-current-time"></div> 

24 <div class="jp-duration"></div> 

25 </div> 

26 <div id="jp playlist 1" class="jp-playlist"> 

和 甸 | <ul> 

28 <!-- The method Playlist.displayPlaylist() uses 
this unordered list --> 

29 <1i></1i> 

30 </ul> 

3 </div> 

32 </div> 

33 </div> 

34 <div id="jquery jplayer 2" class="jp-jplayer"></div> 

35 <div class="jp-audio"> 

36 <div class="jp-type-playlist"> 

37 <div id="jp interface 2" class="jp-interface"> 

38 <ul class="jp-controls"> 

39 <1i><a href="#" class="jp-play" tabindex="1">play 
</a></1i> 

40 <li><a href="#" class="jp-pause" tabindex="1">pause 
</a></1i> 

41 <1i><a href="#" class="jp-stop" tabindex="1">stop 
</a></1i> 

42 <li><a href="#" class="jp-mute" tabindex="1">mute 
</a></1i> 

43 <1i><a href="#" class="jp-unmute" tabindex="1">unmute 
</a></1i> 

44 <1i><a href="#" class="jp-previous" tabindex="1"> 
previous</a></1i> 

45 <1i><a href="#" class="jp-next" tabindex="1">next 
</a></1i> 

46 </ul> 

47 <div class="jp-progress"> 

48 <div class="jp-seek-bar"> 
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49 <div class="jp-play-bar"></div> 

50 </div> 

51 </div> 

52 <div class="jp-volume-bar"> 

53 <div class="jp-volume-bar-value"></div> 

54 </div> 

55 <div class="jp-current-time"></div> 

56 <div class="jp-duration"></div> 

2 </div> 

58 <div id="jp playlist 2" class="jp-playlist"> 

太 六 <ul> 

60 <!-- The method Playlist.displayPlaylist() uses 
this unordered list --> 

61 二 > 

62 </ul> 

63 </div> 

64 </div> 

65 </div> 


上 述 代码 较 第 一 个 示例 多 了 两 个 样式 名 称 ，“jp-previous ”表示 前 一 个 播放 文件 ， 
“jp-next” 表 示 后 一 个 播放 文件 。 另 外 , “jp-video-play” 表 示 视 频 播放 插件 样式 ，“jp-audio” 
表示 音频 播放 插件 样式 。 

前 面 我 们 看 到 的 插件 示例 均 是 单一 文件 播放 ， 但 是 绝 大 部 分 情况 下 播放 的 多 媒体 文件 
是 以 列表 形式 出 现 的 ， 即 多 个 播放 文件 等 待 播放 。 这 种 功能 的 设计 思路 是 通过 对 原 有 播放 
插件 对 象 的 继续 封装 ， 加 入 新 的 属性 和 方法 ， 并 加 入 一 定 显示 样式 ， 使 插件 从 外 观 到 功能 
上 都 具有 播放 多 个 媒体 文件 的 功能 。 

实现 步骤 如 下 。 

(1) 创建 一 个 能 够 容纳 播放 文件 的 播放 列表 对 象 ， 我 们 用 这 个 对 象 封装 了 插件 对 象 。 

(2) 在 初始 化 插件 时 ， 指 定 配置 参数 。 

(3) 对 播放 列表 中 文件 名 部 分 的 样式 进行 设 定 。 

(4) 对 插件 中 播放 前 一 文件 和 播放 后 一 文件 等 相关 功能 的 按钮 编写 实现 代码 。 

(5) 向 播放 列表 中 加 入 多 媒体 文件 ， 并 完善 插件 的 相关 事件 功能 。 

1 <script type="text/javascript"> 

//<! [CDATA[ 


他 $ (document) .ready (function(){ 
3 var Playlist = function(instance, playlist, options) { 
// 创 建 播放 列表 对 象 原型 
4 var self = this; // 播 放 列 表 对 象 
5 this.instance = instance; // 字 符 串 ， 指 定 的 播放 列表 HTML 元 素 
6 this.playlist = playlist; // 数 组 ， 播 放 列表 
this.options = options; // 初 始 化 插件 时 的 配置 信息 
8 this.current = 0; // 当 前 播放 的 媒体 文件 索引 ， 从 第 一 个 文件 开始 播放 
9 this.cssId = { // 插 件 样式 ，CSSs 的 ID 选择 值 
10 jPlayer: "jquery jplayer ™, 
和 L interface: "ip interface ”yr 
了 人 playlist: Tp playiist 
3 }; 
14 this.cssSelector = {}; //CSS 的 选择 器 


a 
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SD 
16 
| 
18 
19 
20 
2 
2 


23 
24 
2 
26 
EA 


28 
29 
30 
3 
3 
33 
34 
35 
36 
3 


38 


39 


40 
41 
42 
43 
44 


45 


46 
47 
48 
49 
50 
51 


52 
53 
54 
55 
56 
357 
58 


“86° 


$.each (this.cssId，function(entity，id) { // 创 建 ID 选择 器 字符 串 
self.cssSelector[entity] = "#" + id + self.instance; 

E> 

if(!this.options.cssSelectorAncestor) { // 创 建 上 级 元 素 的 样式 选择 器 


this.options.cssSelectorAncestor = this.cssSelector.interface; 


} 
$ (this.cssSelector.jPlayer) .jPlayer (this .options); // 初 始 化 播放 插件 
$(this.cssSelector.interface + " .jp-previous") .click(function() { 


// 播 放 前 一 个 媒体 文件 
self.playlistPrev(); 
$ (this) .blur(); 
return false; 
DD); 
$(this.cssSelector.interface + " .jp-next").click(function() { 
// 播 放 后 一 个 媒体 文件 
self.playlistNext(); 
$ (this) .blur(); 
return false; 


1D); 


Playlist.prototype = { 


displayPlaylist: function() { // 定 义 播放 列表 显示 功能 
var self = this; 
$ (this.cssSelector.playlist + " ul") .empty(); // 清 空 原 有 列表 
for (i=0; i < this.playlist.length; i++) { 

// 根 据 列表 文件 个 数 循环 创建 列表 的 HTML 字符 串 
var listIitem = (i 一 = this.playlist.length-1) ? "<1i class= 
'jp-playlist-last'> i 
listItem += "<a href='#' id='" + this.cssId.playlist + this. 
instance + " item " +i+"' tabindex='1'>"+ this.playlist[i]. 
name+"</a>"; 

// 创 建 列表 项 的 链接 
if(this.playlist[i].free) { // 是 否 是 自由 媒体 文件 
var first = true; 
listItem += "<div class='jp-free-media'>("; 
$.each(this.playlist[i], function(property,value) { 
// 将 不 同类 型 的 名 称 加 入 到 列表 中 
if($.jPlayer.prototype.format[property]) { 
// 检 查 媒体 文件 类 型 


(ETESEIE 
first = false; 
} else { 
listItem += " | "; 
} 
listItem += "<a id="'" + self.cssId.playlist + 
selE naLance 3 tom TI ”Droperty 
+"" href='" + value + "' tabindex="'1'>" + property 
a 
} 
1D); 
listItem += ")</span>"; 
S 
listItem += "</1i>"; 
// 显示 媒体 文件 类 型 
$ (this.cssSelector.playlist + " ul") .append (listItem); 
// 向 列表 项 中 加 入 媒体 文件 对 象 
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59 


60 
61 
62 
63 
64 


65 
66 
67 
68 
69 
70 
2 
72 


3 


74 
75 


76 
I 
78 
79 
80 
81 
82 
83 
84 
85 
86 


87 
88 


89 


90 


91 


92 


93 


94 
35 


96 
97 
98 
99 


} 
}, 


// 播 放 列 表 中 媒体 文件 名 链接 的 单 击 操作 
$ (this.cssSelector.playlist + " item " + i).data("index", 
Telick(ttunctionth 
var index = $(this) .data("index"); 
if(self.current !== index) {  // 单 击 的 是 否 是 当前 播放 文件 
self.playlistChange (index) ; // 如 果 不 是 , 则 修改 播放 内 容 
} else { 
$ (self.cssSelector.jPlayer) .jPlayer ("play"); 
// 直 接 播 放 
} 
$ (this) .blur(); 
return false; 
]) 7 
// 强迫 使 用 右键 点 击 播放 自由 媒体 文件 
if(this.playlist[i].free) { 
$.each (this.playlist[i], function (property,value) { 
if($.jPlayer.prototype.format [property]) { 
// 检 查 属性 是 否 是 媒体 文件 类 型 
$ (self.cssSelector.playlist +" item "+i+" " 
+ property) .data ("index", i).click(function() { 
var index = $(this) .data("index"); 
$(self.cssSelector.playlist + " item "+ 
index) .click(); 
$ (this) .blur(); 
return false; 


playlistInit: function(autoplay) { // 播 放 列表 初始 化 中 检测 是 否 是 自动 播放 
if(autoplay) { 


this.playlistChange (this.current); 
// 如 果 是 自动 播放 ， 则 从 当前 文件 播放 


} else { 


} 
}, 


this.playlistConfig(this.current); 
// 否 则 配置 当前 文件 为 播放 文件 , 但 不 播放 


// 下 面部 分 是 定义 播放 列表 对 象 的 播放 相关 功能 ， 包 括 配置 方法 、 改 变 播放 文件 方法 、 
播放 前 一 文件 ， 播 放 后 一 文件 


playlistConfig: function(index) { 


// 配 置 播放 文件 ， 并 修改 列表 中 文件 名 的 显示 样式 


$ (this.cssSelector.playlist + " item " + this.current). 
removeClass ("jp-playlist-current") .parent () .removeClass ("jp- 
playlist-current"); 

$(this.cssSelector.playlist + " item " + index) .addClass ("jp- 
playlist-current") .parent () .addClass ("jp-playlist-current"); 
this.current = index; 

$ (this.cssSelector.jPlayer) .jPlayer ("setMedia", this.playlist 
[this.current]); 


}, 


playlistChange: function(index) { 1/ 改变 播放 的 媒体 文件 
this.playlistConfig (index); 
$ (this.cssSelector.jPlayer) .jPlayer ("play"); 
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}, 

playlistNext: function() { // 播 放 后 一 个 媒体 文件 
var index = (this.current + 1 < this.playlist.length) ? this. 
current + 1 : 0; 
this.playlistChange (index); 

}, 

playlistPrev: function() { // 播 放 前 一 个 媒体 文件 
Var index = (this.current - 1 >= 0) ? this.current - 1 : this. 
playlist.length - 1; 
this.playlistChange (index); 

} 


}; 

// 对 播放 列表 添加 媒体 文件 ， 并 对 准备 播放 、 结 束 播 放 、 播 放 事 件 功 能 进行 加 工 ， 这 里 添加 的 
是 视频 文件 

var videoPlaylist = new Playlist("1", [ 


]， 


}) 


{ 


{ 
name:"Big Buck Bunny Trailer", 
free:true, 
m4v: "MediaFiles/Big Buck Bunny Trailer 480x270 h264aac.m4v"， 
ogv:"MediaFiles/Big Buck Bunny Trailer 480x270.0gv", 
poster:"MediaFiles/Big Buck Bunny Trailer 480x270.png" 


}, 


name:"Finding Nemo Teaser", 

m4v: "MediaFiles/Finding Nemo Teaser 640x352 h264aac.m4v", 
ogv: "MediaFiles/Finding Nemo Teaser 640x352.0gv", 

poster: "MediaFiles/Finding Nemo Teaser 640x352.png" 


name:"Incredibles Teaser", 

m4v: "MediaFiles/Incredibles Teaser 640x272 h264aac.m4v", 
ogv: "MediaFiles/Incredibles Teaser 640x272.0gv", 

poster: "MediaFiles/Incredibles Teaser 640x272.png" 


ready: function() { // 准 备 播 放 事 件 
VideoPlaylist.displayPlaylist (); 
videoPlaylist.playlistInit (false); // 参数 为 自动 播放 的 布尔 值 设 置 


de Geen f // 结 束 播放 事件 ， 转 为 播放 下 一 个 媒体 文件 
VideoPlaylist.playlistNext(); 


play: function() { // 播 放 事件 
$ (this) .jPlayer ("pauseOthers"); // 暂 停 其 他 文件 播放 


“了 
swfPath: “is”, 
supplied: "ogv, m4Av" 


// 对 播放 列表 添加 媒体 文件 ， 并 对 准备 播放 、 结 束 播放 、 播 放 事 件 功能 进行 加 工 ， 这 里 添加 的 
是 音频 文件 
Var audioPlaylist = new Playlist("2", [ 


{ 
name:"Tempered Song", 
mp3:"MediaFiles/Miaow-01-Tempered-song.mp3", 
oga:"MediaFiles/Miaow-01-Tempered-song.ogg" 


}, 
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150 

yD name:"Hidden", 

E52 mp3:"MediaFiles/Miaow-02-Hidden.mp3", 

83 oga:"MediaFiles/Miaow-02-Hidden.ogg" 

154 je 

ss 

156 name:"Lentement", 

5 free:true, 

158 mp3:"MediaFiles/Miaow-03-Lentement .mp3", 

159 oga:"MediaFiles/Miaow-03-Lentement .ogg" 

160 和 

161 

162 name:"Lismore", 

163 free:true, 

164 mp3:"MediaFiles/Miaow-04-Lismore.mp3", 

165 oga:"MediaFiles/Miaow-04-Lismore.ogg" 

166 Ee 

167 { 

168 name:"The Separation", 

169 mp3:"MediaFiles/Miaow-05-The-separation.mp3", 

170 oga:"MediaFiles/Miaow-05-The-separation.ogg" 

BT i 

172 

3 name:"Beside Me", 

174 mp3:"MediaFiles/Miaow-06-Beside-me.mp3", 

hy oga:"MediaFiles/Miaow-06-Beside-me.ogg" 

176 I 

LI 

178 name:"Bubble", 

179 free:true, 

180 mp3:"MediaFiles/Miaow-07-Bubble.mp3", 

181 oga:"MediaFiles/Miaow-07-Bubble.ogg" 

182 区 

183 { 

184 name:"Stirring of a Fool", 

185 mp3:"MediaFiles/Miaow-08-Stirring-of-a-fool .mp3", 

186 oga:"MediaFiles/Miaow-08-Stirring-of-a-fool.ogg" 

187 

188 

189 name:"Partir", 

190 mp3:"MediaFiles/Miaow-09-Partir.mp3", 

191 oga:"MediaFiles/Miaow-09-Partir.ogg" 

192 [2 

193 

194 name:"Thin Ice", 

195 free:true, 

196 mp3:"MediaFiles/Miaow-10-Thin-ice.mp3", 

197 oga:"MediaFiles/Miaow-10-Thin-ice.ogg" 

198 

Ep Be | 

200 ready: function() { 

201 audioPlaylist.displayPlaylist (); 

202 audiopPlaylist.playlistInit (false);// Parameter is a boolean for 
autoplay. 

203 i 

204 ended: function() { 

205 audioPlaylist.playlistNext (); 
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206 } 


207 play: function() { 

208 $ (this) .jPlayer ("pauseOthers"); 
209 让 

210 swfPath: "js", 

2 supplied: "oga, mp3" 

212 }); 

213 }); 

> 


214 </script> 


上 述 代码 第 3 一 32 行 定义 Playlist 对 象形 式 ， 其 中 instance 表示 插件 列表 对 象 实例 ， 
playlist 表示 插件 数组 ，options 表示 插件 初始 化 参数 。 第 8 行 设 定 初始 播放 顺序 为 第 一 个 媒 
体 文件 ; 第 9 一 13 行 设 定 代表 插件 的 HTML 元 素 的 ID 匹配 内 容 。 第 15 一 17 行 设 定 每 个 插 
件 的 CSS 选择 器 。 第 18 一 20 行 获取 上 层 样 式 设 定 的 ID。 第 21 行 利用 options 参数 初始 化 
播放 器 。 第 22 一 26 行 设 定 前 一 个 媒体 文件 按钮 的 单 击 处 理事 件 。 第 27 一 32 行 设 定 后 一 个 
媒体 文件 按钮 的 单 击 处 理事 件 。 

第 33 一 109 行 设 定 Playlist 对 象 属性 及 操作 。 其 中 第 34 一 83 行 创 建 播放 列表 。 第 38、 
39 行 创 建 播放 列表 上 单 击 播放 文件 名 的 超 链 接 。 第 41 一 54 行 判 断 播放 文件 是 否 显示 多 种 
播放 格式 (mp3loga) 。 第 59 一 68 行 设 定 每 个 播放 超 链 接 的 单 击 事件 ， 如 果 单 击 的 不 是 当 
前 播放 文件 ， 则 使 用 播放 改变 函数 处 理 ， 否 则 重新 播放 当前 文件 。 第 70 一 81 行 判断 播放 超 
链接 是 否 具有 多 种 播放 格式 ， 强 迫 通过 右键 单 击 访问 。 

第 84 一 90 行为 播放 列表 初始 化 函数 ， 判 断 是 否 允 许 自动 播放 ， 如 果 允 许 则 自动 播放 
当前 文件 ， 否则 配置 播放 文件 位 置 。 第 91 一 96 行 配置 播放 列表 播放 顺序 。 第 97 一 100 行 改 
变 播 放 列 表 顺 序 。 第 101 一 104 行 播放 下 一 个 媒体 文件 。 第 105 一 109 行 播放 前 一 个 媒体 文 
件 。 第 110 一 143 行 初始 化 第 一 个 视频 播放 插件 。 第 144 一 211 行 初始 化 第 二 个 音频 播放 插 
件 ， 这 两 部 分 代码 与 前 面 的 例子 类 似 。 效 果 如 图 12.8 和 图 12.9 所 示 。 
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图 12.9 自 定 义 播放 器 操作 音频 播放 


12.3 ”jlEmbed 插件 


jlEmbed 插件 几乎 可 以 嵌入 任何 一 种 媒体 类 型 到 网 页 上 。 它 内 建 了 音乐 列表 支持 。 这 
个 插件 和 前 面 所 介绍 的 插件 不 同 之 处 在 于 ， 它 的 所 有 属性 设 定 都 写 在 元 素 中 ， 而 不 是 通过 
初始 化 函数 来 完成 设 定 。 它 的 英文 网 址 为 http://jasonlau.biz/home/jlembed-for-jquery。 
下 面 看 一 下 这 个 插件 的 属性 说 明 ， 如 表 12.4 所 示 。 


表 12.4 jlEmbed 插 件 属性 说 明 


属 性 类 型 默认 值 说 明 
ett 布尔 i 加 四 自动 播放 ， 但 是 在 adobeflash, musicplayer, silverlight 
caption 字符 串 | null 在 嵌入 的 播放 器 下 加 入 文本 或 者 HTML 
controls 布尔 false 只 在 youtube 模式 下 使 用 ， 在 播放 器 下 添加 通用 控制 按钮 
debug 布尔 false 只 在 youtube 模式 下 使 用 ， 显 示 嵌 入 对 象 的 父 内 容 
error_alert 布尔 false 当 插件 运行 发 生 错误 时 抛 出 JavaScript 的 警告 对 话 框 
format 字符 串 HTML 输出 格式 
height 数值 varis 插件 的 高 
id 字符 串 嵌入 对 象 的 ID 
loop 布尔 false 自动 循环 播放 
mode 字符 串 “| null 设置 插件 模式 
params 字符 串 自 定义 参数 
screw 布尔 false 当 播 放 器 在 页 面 可 见 时 加 载 
shuffle 布尔 false 重新 排列 播放 列表 
src 字符 串 媒体 资源 位 置 
stop_onerror | 布尔 false 只 在 youtube 模式 下 使 用 ， 当 发 生 错误 时 停止 
volume 数值 100 只 在 youtube 模式 下 使 用 ， 设 置 默认 音量 
width 数值 varies 嵌入 播放 器 的 高 
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下 面 通过 示例 来 了 解 这 个 插件 如 何 加 载 各 种 媒体 文件 。 
12.3.1 插件 基本 使 用 


这 个 示例 使 用 插件 加 载 一 个 Flash 文件 。 前 面 介绍 过 这 个 插件 属于 自动 初始 化 ， 所 以 
我 们 只 需要 引入 相关 的 jQuery 库 文件 : 
<script type="text/javascript" src="../../jslib/jquery-1.6.js"></script> 


<script type="text/javascript" src="JS/jquery.jlembed.js"></script> 
// 插 件 核心 功能 文件 


然后 建立 静态 页 面 ， 并 在 页 面 的 HTML 标记 上 将 插件 需要 的 属性 添加 进去 就 可 以 了 : 

<div id="mydiv" class="jlembed" data-id="myplayer" data-mode="adobeflash" 

data-params="' {"wmode":"transparent", "quality":"high", "allowscriptaccess": 

"always", "allowfullscreen":"true"}' data-format="swfobject" data-src= 

'MediaFile/example.swf' data-width="294" data-height="196" data-caption= 

"This is funny." data-screw="true"></div> 

上 述 代码 实现 了 Flash 文件 的 加 载 ， 这 里 需要 说 明 的 是 如 果 希 望 在 元 素 上 内 区 插件 ， 

则 该 元 素 的 类 属性 需要 设 定 为 “jlembed”， 后 面 的 示例 也 是 如 此 。 表 12.4 所 提 到 的 所 有 属 
性 如 果 在 标记 中 需要 指定 , 则 要 在 属性 前 加 上 data 前 级 。 这 个 示例 使 用 params 设 定 了 Flash 
文件 加 载 效果 ， 窗 口 模式 透明 ("wmode":"transparent") ， 夯 面 质量 高 ("quality":"high")， 
允许 脚本 访问 ("allowscriptaccess": "always") ， 人 允许 全 屏 〈"allowfullscreen":"true") 。 效 果 
如 图 12.10 所 示 。 


12.3.2 ”使 用 Windows Media Player 播放 


这 个 示例 使 用 了 Windows Media Player 播放 文件 ， 代 码 如 下 : 


<div id="mydiv" class="jlembed" data-id="myplayer" data-mode="windowsmedia" 
data-params="'{"console":"cons", "controls":"all"}' data-format="objectembed" 
data-src="MediaFile/mixdown.mp3" data-width="300" data-height="40" 
data-autostart="false" data-loop="true" data-caption="This is my song." 
data-screw="true"></div> 


上 述 代码 指定 了 播放 MP3 文件 的 格式 , 并 使 用 Windows Media Player 软件 来 播放 。 如 
果 你 的 计算 机 中 也 安装 了 Real Player， 则 将 data-mode= "windowsmedia" 修改 成 
data-mode='realplayer" 就 可 以 使 用 Real Player 来 播放 了 。 效 果 如 图 12.11 所 示 。 


一 
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This is my song_ 
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图 12.10 jiEmbed 基本 使 用 示例 效果 图 12.11 使 用 Windows Media Player 播放 MP3 
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12.3.3 使 用 QuickTime 播放 


这 个 示例 使 用 QuickTime 播放 多 媒体 文件 。 代 码 如 下 : 


<div id="mydiv" class="jlembed" data-id="myplayer" data-mode="quicktime" 
data-params="'{"controller":"true"}' data-format="objectembed" data-src= 
'{"Mixdownl1":"MediaFile/mixdown.mp3","Mixdown2":"MediaFile/mixdown.mp3" 
}' data-width="300" data-height="45" data-autostart="false" data-loop= 
"true" data-shuffle="false" data-caption="This is my song." data-screw= 
"true"></div> 


上 述 代码 指定 了 使 用 QuickTime 播放 MP3 多 媒体 资源 文件 ， 效 果 如 图 12.12 所 示 。 
12.3.4 使 用 SilverLight 播放 


这 个 示例 使 用 SilverLight 播放 多 媒体 文件 。 代 码 如 下 : 


<div id="mydiv" class="jlembed" data-id="myplayer" data-mode="silverlight" 
data-params="'{"onLoad": slLoad0", "onError":" slError0", "windowless": 
"false", "maxFramerate":"30"}' data-format="objectembed" data-src='MediaFile/ 
WeatherWidget.xap' data-width="300" data-height="250" data-caption="This 
is a test caption." data-screw="true"></div> 


上 述 代 码 对 SilverLight 的 使 用 做 了 参数 设 定 ， 加 载 事 件 ("onLoad":"_ slLoad0") ， 发 
生 错 误 事 件 ("onError":"_slError0") ， 不 显示 无 窗口 插件 ("windowless":"false") ,设置 
每 秒 可 呈现 的 最 大 帧 数 ("maxFramerate":"30") 。 效 果 如 图 12.13 所 示 。 
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This is my song. 


图 12.12 使 用 QuickTime 播放 MP3 图 12.13 利用 SilverLight 播放 多 媒体 文件 


12.3.5 ”使 用 Flash Player 播放 


这 个 示例 调用 了 Adobe 的 Flash Player 播放 器 播放 Flash 文件 ， 代 码 如 下 : 
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<div id="mydiv" class="jlembed" data-id="myplayer" data-mode="adobeflash" 
data-params=" {"wmode":"transparent", "quality":"high", "allowscriptaccess": 
"always", "allowfullscreen":"true"}' data-format="swfobject" data-src= 
"MediaFile/example.swf' data-width="294" data-height="196" data-caption= 
"This is funny." data-screw="true"></div> 


上 述 代 码 与 12.3.1 节 介绍 的 示例 基本 相同 ， 效 果 如 图 12.14 所 示 。 


(hello ) 
Src: 


图 12.14 利用 Adobe Flash Player 播放 Flash 文件 


12.4 小 结 


多 媒体 播放 插件 能 够 帮助 界面 设计 人 员 更 灵活 地 表现 页 面 内 容 ， 也 能 让 用 户 看 到 更 生 
动 的 页 面 。 本 章 主要 介绍 了 多 媒体 插件 的 使 用 方法 。 重 点 内 容 是 插件 的 功能 与 外 观 定制 ， 
同时 这 部 分 也 是 本 章 的 难点 。 下 一 章 将 介绍 jQuery 动画 设计 。 


12.5 习 题 


【习题 1】 练 习 jQuery.Flash 插件 的 使 用 方法 。 
【习题 2】 练 习 jPlayer 插件 的 使 用 方法 。 
【习题 3】 练 习 jlEmbed 插件 的 使 用 方法 。 
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动画 可 以 更 直观 、 更 生动 地 表现 出 设计 者 的 意图 。 动 画 可 以 通过 专业 的 动画 软件 如 
Flash 等 来 制作 。 现 在 网 页 上 动画 所 占 的 比例 越 来 越 大 。 jQuery 除了 可 以 实现 前 面 章节 所 完 
成 的 效果 外 ,还 可 以 在 一 定 程度 上 实现 动画 效果 。 本 章 讲解 如 何 利用 jQuery 在 网 页 上 制作 


动画 。 


13.1 jQuery 动画 基础 


本 节 将 介绍 利用 jQuery 实现 动画 效果 的 基础 知识 。 在 前 面 的 章节 中 介绍 了 jQuery 制 
作 动 画 的 一 些 相关 函数 ， 本 节 总 结 一 下 这 些 函数 ， 并 通过 示例 来 说 明 应 用 。 


13.1.1 jQuery 动画 函数 


jQuery 的 动画 函数 总 共 分 成 4 类 。 


(1) 基本 动画 函数 : 既 有 透明 度 渐变 ， 又 有 滑动 效果 ， 是 最 常用 的 动画 效果 函数 


(2) 滑动 动画 函数 : 仅 适 用 滑动 渐变 动画 效果 。 
(3) 淡 入 淡出 动画 函数 : 仅 适 用 透明 度 渐变 动画 效果 。 
(4) 自 定 义 动 画 函 数 ， 作 为 上 述 三 种 动画 函数 的 补充 和 扩展 。 


下 面 将 这 几 种 动画 函数 总 结 一 下 。 首 先是 基本 动画 函数 ， 如 表 13.1 所 示 。 


表 13.1 jQuery 基本 动画 函数 总 结 
说 明 


show() 


显示 隐藏 的 匹配 元 素 。 

这 个 函数 就 是 'show( speed，[callback] ) 的 
无 动画 版 本 。 如 果 选 择 的 元 素 是 可 见 的 ， 这 
个 方法 将 不 会 改变 任何 东西 。 无 论 这 个 元 素 
是 通过 hide0 方 法 隐藏 的 还 是 在 CSS 里 设置 
了 display:none;， 这 个 方法 都 将 有 效 


$C"p").showO 


show(speed,[callback]) 


$("p").show("slow"); 以 优雅 的 动画 显示 所 有 匹配 的 元 素 , 并 在 显 
$("p").show("fast",functionO{ 示 完 成 后 可 选 地 触发 一 个 回调 函数 。 可 以 根 
S$(this).text("Animation 据 指定 的 速度 动态 地 改变 每 个 匹配 元 素 的 
Done!"): 高 度 、 宽 度 和 不 透明 度 。 在 jQuery 1.3 中 ， 
六); padding 和 margin 也 会 有 动画 ， 效 果 更 流畅 


hide0 


隐藏 显示 的 元 素 。 这 个 函数 就 是 hide( speed， 
S$Cp")hideO [callback] ) 的 无 动画 版 本 。 如 果 选 择 的 元 
素 是 隐藏 的 , 这 个 方法 将 不 会 改变 任何 东西 
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函数 使 用 方式 说 明 
Sopm hide("slow"): 以 优雅 的 动画 隐藏 所 有 匹配 的 元 素 ， 并 在 显 
so ") hide("fast" | 示 完 成 后 可 选 地 触发 一 个 回调 函数 。 可 以 根 
hide(speed,[callback]) i g i Done 据 指定 的 速度 动态 地 改变 每 个 匹配 元 素 的 高 
ee 度 、 宽 度 和 不 透明 度 。 在 jQuery 1.3 中 ， 
»; padding 和 margin 也 会 有 动画 ， 效 果 更 流畅 
切换 元 素 的 可 见 状 态 。 如 果 元 素 是 可 见 的 ， 
toggle0) $(0p")toggle0 切换 为 隐藏 的 ， 如 果 元 素 是 隐藏 的 ， 切 换 为 
可 见 的 
var flip = 0; a 3 
. 4 . 根据 switch 参数 切换 元 素 的 可 见 状态 (trme 
$Cbutton").click(fmction 0 {| 为 可 见 ,false 为 隐藏 ). 如 果 switeh 设 为 tme， 
toggle(switch) 


$("p").toggle( flip++ % 
2 一 0); 


则 调用 show0 方 法 来 显示 匹配 的 元 素 ， 如 果 
switch 设 为 false， 则 调用 hide0 来 隐藏 元 素 


$("p").toggle("slow"); 
$("p").toggle("fast",functionO{ 


toggle(speed [callback]) alert("Animation Done."); 


滑动 动画 函数 如 表 13.2 所 示 。 


表 13.2 jQuery 滑动 动画 


$("p").slideDown("slow"); 
slideDown(speed,[Callback]) 
D; 


$("p").slideUp("slow"); 
slideUp(speed,[Callback]) 
DD); 


S$("p").slideDown("fast",functionO{ 
alert("Animation Done."); 


$("p").slideUp("fast",functionO{ 
alert("Animation Done."); 


以 优雅 的 动画 切换 所 有 匹配 的 元 素 ， 并 在 显 
示 完 成 后 可 选 地 触发 一 个 回调 函数 。 可 以 根 
据 指定 的 速度 动态 地 改变 每 个 匹配 元 素 的 高 
度 、 宽 度 和 不 透明 度 。 在 jQuery 1.3 中 ， 


padding 和 margin 也 会 有 动画 ， 效 果 更 流畅 
本 函数 总 结 
说 明 


通过 高 度 变 化 (向 下 增 大 ) 来 动态 
地 显示 所 有 匹配 的 元 素 , 在 显示 完 
成 后 可 选 地 触发 -个 回调 函数 。 这 
个 动画 效果 只 调整 元 素 的 高 度 , 可 
以 使 匹配 的 元 素 以 “滑动 ”的 方式 
显示 出 来 。 在 jQuery 1.3 中 ， 上 下 
的 padding 和 margin 也 会 有 动画 ， 
效果 更 流畅 
通过 高 度 变 化 (向 上 减 小 ) 来 动态 
地 隐藏 所 有 匹配 的 元 素 , 在 隐藏 完 
成 后 可 选 地 触发 一 个 回调 函数 


$("p").slideToggle("slow"); 
slideToogle(speed,[Callback]) 


淡 入 淡出 动画 函数 如 表 13.3 所 示 。 


$("p").slideToggle("fast",functionO{ 
alert("Animation Done."); 


通过 高 度 变化 来 切换 所 有 匹配 元 
素 的 可 见 性 , 并 在 切换 完成 后 可 选 
地 触发 一 个 回调 函数 


表 13.3 jQuery 淡 入 淡出 动画 函数 总 结 


$("p").fadeIn("slow"): 


$("p").fadeIn("fast",functionO{ 
alert("Animation Done."); 
D; 


fadeIm(speed,[Callback]) 
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通过 不 透明 度 的 变化 来 实现 所 有 匹 
配 元 素 的 淡 入 效果 ， 并 在 动画 完成 后 
可 选 地 触发 一 个 回调 函数 。 这 个 动画 
只 调整 元 素 的 不 透明 度 ， 也 就 是 说 所 
有 匹配 的 元 素 的 高 度 和 宽度 不 会 发 
生变 化 
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函数 


使 用 方式 


说 明 


fadeOut(speed.[Callback]) 


六 ; 


fadeTo(speed,[Callback]) | { 


animate(param, 
[dur,[el,[fn]) 


animate 
(param.,options) 


$("p").animate({ 
height: toggle', opacity: 
'toggle' 
}, "slow"); 
$("p").animate( { 
‘opacity: 'show' 


}, "slow", "easein"); 


$("p").animate({ 
left: 50., opacity: 'show’ 
}, { duration: 500 }); 


$("p").animate({ 
‘opacity: 'show' 
}, { duration: "slow", 
easing: "easein" }); 


$("p").fadeOut("slow"): 
$("p").fadeOut("fast",functionO{ 
alert("Animation Done."); 


$("p").fadeTo("slow", 0.66); 
$("p").fadeTo("fast", 0.25, function() 


alert("Animation Done."); 


通过 不 透明 度 的 变化 来 实现 所 有 匹 
配 元 素 的 淡出 效果 ， 并 在 动画 完成 后 
可 选 地 触发 一 个 回调 函数 


把 所 有 匹配 元 素 的 不 透明 度 以 渐进 
方式 调整 到 指定 的 不 透明 度 ， 并 在 动 
画 完成 后 可 选 地 触发 一 个 回调 函数 


指定 动画 形式 及 结果 样式 属性 对 象 。 每 个 属性 的 值 表 
示 这 个 样式 属性 到 多 少时 动画 结束 。 如 果 是 一 个 数值 ， 
样式 属性 就 会 从 当前 的 值 渐变 到 指定 的 值 。 如 果 使 用 
的 是 “hide”、“show” 或 “toggle” 这 样 的 字符 串 值 ， 
则 会 为 该 属性 调用 默认 的 动画 形式 。param， 一 组 包 
含 作为 动画 属性 和 终 值 的 样式 属性 以 及 其 值 的 集合 ; 

duration， 三 种 预定 速度 之 一 的 字符 串 (“slow”、 
“normal”or“fast”) 或 表示 动画 时 长 的 堂 秒 数值 (如 
1000〉; easing， 要 使 用 的 擦 除 效果 的 名 称 〈 需 要 插件 
支持 ), jQuery 默认 提供 “linear” 和 “swing”; callback， 
在 动画 完成 时 执行 的 函数 

指定 动画 形式 及 结果 样式 属性 对 象 。 每 个 属性 的 值 表 
示 这 个 样式 属性 到 多 少时 动画 结束 。 如 果 是 一 个 数值 ， 
样式 属性 就 会 从 当前 的 值 渐变 到 指定 的 值 。 如 果 使 用 
的 是 “hide”、“show” 或 “toggle” 这 样 的 字符 串 值 ， 
则 会 为 该 属性 调用 默认 的 动画 形式 。param， 一 组 包 
含 作为 动画 属性 和 终 值 的 样式 属性 以 及 其 值 的 集合 ; 

options， 一 组 包含 动画 选项 的 值 的 集合 ，duration， 三 
种 预定 速度 之 一 的 字符 串 (“slow”、“normal” or 
“fast”) 或 表示 动画 时 长 的 毫秒 数值 (如 1000); easing， 
要 使 用 的 探 除 效 果 的 名 称 〈 需 要 插件 支持 ) ，jQuery 默 
认 提 供 “linear” 和 “swing”; complete， 在 动画 完成 时 
执行 的 函数 ; step, 动画 步 进 时 执行 的 函数 ; queue，( 默 
认 值 ，true》 设 定 为 false 将 使 此 动画 不 进入 动画 队列 


stop([clearQueue], 
[gotoEnd]) 


$(".block").stopO; 


停止 所 有 在 指定 元 素 上 正在 运行 的 动画 。 如 果 队 列 中 
有 等 待 执行 的 动画 (并且 clearQueue 没有 设 为 tue) ， 
它们 将 被 马上 执行 。clearQueue， 如 果 设 置 成 tue， 则 
清空 队列 ， 可 以 立即 结束 动画 ; gotoEnd， 让 当前 正在 
执行 的 动画 立即 完成 ， 并 且 重 设 show 和 hide 的 原始 
样式 ， 调 用 回调 函数 等 


delay(duration, 
[queueName]) 


$(#f00").slideUp(300). 
delay(800) fadeIn(400): 


设置 一 个 延 时 来 推迟 执行 队列 中 之 后 的 项 目 。 用 于 将 
队列 中 的 函数 延 时 执行 。 它 既 可 以 推迟 动画 队列 的 执 
行 ， 也 可 以 用 于 自 定义 队列 。duration， 延 时 时 间 ， 单 
位 为 毫秒 ;，queueName， 队 列 名 词 ， 默 认 是 Fx， 动 画 
队列 


sas 
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除了 上 述 这 些 函 数 外 ，jQuery 中 与 动画 相关 的 还 有 一 个 设置 选项 jQuery.fx.off， 它 关 


pe te de ei true 可 以 立即 关闭 所 有 动画 


口 ON 
口 你 的 一 些 用 户 由 于 动画 效果 而 遇 到 了 可 访问 性 问题 。 
当 把 这 个 属性 设 成 false 之 后 ， 可 以 重新 开启 所 有 动画 


13.1.2 jQuery 动画 简单 示例 


动画 


上 垂直 摆 放 几 个 超 链接 ， 当 将 鼠标 悬 停 在 其 中 一 个 超 链 接 上 
时 ， 这 个 超 链接 动态 向 右 缩 进 ， 当 鼠标 移 开 超 链接 时 它 恢 复 
到 原来 的 位 置 。 实 现 原理 就 是 利用 了 前 面 总 结 的 自 定义 动画 


函数 


属性 ， 


下 面 用 一 个 自 定义 动画 的 简单 示例 来 看 一 下 jQuery 制作 
的 过 程 。 在 这 个 示例 中 我 们 所 要 达成 的 效果 是 : 在 页 面 


(所 有 效果 会 立即 执 


animate()， 并 在 这 个 函数 中 修改 超 链接 的 padding-left 
而 且 给 定 了 动画 持续 时 间 ， 效 果 如 图 13.1 所 示 。 


file:///D:/WriteBook/ji 起 100% ~ 


为 了 实现 这 个 效果 , 我 们 在 HTML 静态 页 面部 分 创建 列 


<ul><1i><a href="#" class="link"> 首 页 </a></1i> 
<1i><a href="#"” class="]ink"> 菜 单一 </a></1i> 
<1i><a href="#" class="1ink"> 菜 单 二 </a></1i> 
<li><a href="#" class="1ink"> 菜 单 三 </a></1i> 


<1i><a href="#" class="1ink"> 菜 单 五 </a></1i> 
<1i><a href="#"” class="]link"> 菜 单 六 </a></1i> 
</ul> 


然后 ， 引 入 jQuery 库 文件 : 


业 
2 
3 
4 
地 <1i><a href="#"” class="1link"> 菜 单 四 </a></1i> 
6 
J. 
8 


图 13.1 jQuery 简单 动画 效果 一 


<script type="text/javascript" src="jslib/jquery-1.6.js"></script> 


最 后 ， 加 上 JavaScript 功能 代码 : 


<script type="text/javascript"> 


人 
2 $ (document) .ready (function() { 
3 
4 


$('a.link') .hover (function() { 


$ (this) .animate({ paddingLeft: '20px' },400); 
// 调 用 自 定义 动画 实现 列表 项 右 缩 进 


5 }, function() { 


$ (this) .animate ({ paddingLeft: 0 }, 400); 


// 调 用 自 定义 动画 实现 列表 项 位 置 还 原 


加 ys 
8 1); 
Script> 


上 述 代码 第 3 行使 用 了 模仿 鼠标 悬 停 与 离开 事件 函数 。 第 4 行使 用 了 自 定义 动画 函数 ， 
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并 设 定 超 链接 左 缩 进 20 像素 的 动画 效果 , 整个 动画 持续 时 间 为 400 毫秒 , 这 个 效果 在 鼠标 
悬 停 在 超 链接 上 时 发 生 。 第 6 行 同样 使 用 了 自 定义 动画 函数 ， 将 超 链接 位 置 恢复 为 原来 的 
位 置 ， 动 画 时 间 持 续 为 400 毫秒 ， 这 个 效果 在 鼠标 离开 超 链接 时 发 生 。 如 果 将 鼠标 依次 滑 
过 每 个 超 链接 ， 则 动画 效果 会 更 清晰 。 效 果 如 图 13.2 所 示 。 


fileVWDYWriteBoolwi 或 100% ~ 


图 13.2 jQuery 简单 动画 效果 二 


13.2 jQuery UI 中 实现 的 动画 效果 


在 jQuery UI 中 提供 了 多 种 动画 效果 供 我 们 参考 。 除 了 前 面 介绍 的 基本 动画 效果 、 滑 
动 效果 、 淡 入 淡出 效果 外 ， 还 有 百叶 窗 效果 、 跳 跃 效 果 、 缩 减 效 果 、 移 动 效果 、 分 裂 效 果 、 
折 芝 效果、 高 亮 淡 入 淡出 效果 、 脉 冲 闪 炬 效果、 摆动 效果 等 。 本 节 逐 一 介绍 它们 的 实现 。 


13.2.1 jQuery UI 动画 特效 使 用 


首先 , 参照 jQuery UI 中 给 出 的 示例 来 看 一 下 如 何 使 用 动画 特效 .这 个 示例 在 jQuery UI 
的 demos 文件 下 的 show 子 文件 夹 中 。 它 使 用 了 jQuery UI 提供 的 各 种 特效 显示 一 个 消息 层 。 
该 示例 的 HTML 源 代码 如 下 : 


1 <div class="demo"> 

2 <div class="toggler"> 

3 <div id="effect" class="ui-widget-content ui-corner-all"> 
4 <h3 class="ui-widget-header ui-corner-all">Show</h3> 

3 <p> 

6 Etiam libero neque, luctus a, eleifend nec, semper at, lorem. 
Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit 
Vitae, mi. 


</p> 
8 </div> 
9 </div> 


10 <select name="effects" id="effectTypes"> 
11 <option value="blind">Blind</option> 

12 <option value="bounce">Bounce</option> 
13 <option value="clip">Clip</option> 

14 <option value="drop">Drop</option> 
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15 <option value="explode">Explode</option> 

16 <option value="fold">Fold</option> 

17 <option value="highlight">Highlight</option> 

18 <option value="puff">Puff</option> 

19 <option value="pulsate">Pulsate</option> 

20 <option value="scale">Scale</option> 

21 <option value="shake">Shake</option> 

22 <option value="size">Size</option> 

23 <option value="slide">Slide</option> 

24 </select> 

25 <a href="#" id="button" class="ui-state-default ui-corner-all">Run 
Effect</a> 

26 </div><!-- End demo --> 

27 <div class="demo-description"> 

28 <p>Click the button above to preview the effect.</p> 

29 </div><!-- End demo-description --> 


上 述 代码 第 2 一 9 行 是 需要 触发 让 其 显示 的 信息 层 ; 第 10 一 24 层 是 选择 各 种 效果 的 下 
拉 列 表 框 部 分 。 
要 实现 这 些 动画 效果 ， 需 要 引入 相应 的 jQuery 库 文件 : 


1 SCript SEC /jquery=1-.6.2- 9"></script> 

迪 <script src="../../ui/jquery.effects.core.js"></script> 

3 <script src="../../ui/jquery.effects.blind.js"></script> 

4 <script src="../../ui/jquery.effects.bounce.js"></script> 
5 <script src="../../ui/jquery.effects.clip.js"></script> 

6 <script ./../ui/jquery.effects.drop.js"></script> 

7 <script src ./../ui/jquery.effects.explode.js"></script> 
8 


<script ../../ui/jquery.effects.fold.js"></script> 

9 <script src="../../ui/jquery.effects.highlight.js"></script> 
10 <script src="../../ui/jquery.effects.pulsate.js"></script> 
11 <script src="../../ui/jquery.effects.scale.js"></script> 

12 <script src="../../ui/jquery.effects.shake.js"></script> 


13 <script src="../../ui/jquery.effects.slide.js"></script> 


上 述 各 个 JS 文件 就 是 jQuery UI 提供 动画 特效 的 插件 文件 ， 每 个 插件 文件 名 中 都 有 
effects 这 个 单词 ， 表 示 效 果 。 
在 JavaScript 代码 中 按照 下 拉 列 表 框 中 选择 的 效果 运行 插件 : 
<script> 
$ (function() { 
// 执 行当 前 选择 动画 特效 
function runEffect() { 


2 
3 
4 
// 获 取 特效 类 型 
6 
7 
8 
9 
i 


Var selectedEffect = $( "#effectTypes" ) .val(); 
// 很 多 特效 不 需要 配置 参数 
var options = {}; 
// 特 效 类 型 的 相关 参数 设 定 
0 if ( selectedEffect === "scale" ) { 
11 options = { Percent: 100 }; 
bh le } else if ( selectedEffect === "size" ) { 
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IE options = { to: { width: 280, height: 185 } }; 

14 ;i 

I / /运行 特效 

16 $( "#effect" ) .show( selectedEffect, options, 500, callback ); 
六 对 }; 

18 // 回 调 函 数 使 用 了 一 个 隐藏 的 消息 层 

19 function callback() { 

20 setTimeout (function() { 

之 二 $( "#effect:visible" ) .removeRAttr ( "style" ) .fadeout() 
E24 Fr L000 ) 

23 }; 

24 // 设 置 特效 效果 

25 ss "#button™ ) elick(function() 1{ 

26 runEffect(); 

忆 有 return false; 

28 DD); 

29 $( "#effect" ).hide(); 

30 3}); 


3 </script> 


上 述 代码 第 6 行 获取 下 拉 列 表 框 的 选择 特效 名 称 。 第 8 行 定义 特效 执行 选项 。 第 10 一 
14 行 判 断 是 使 用 原 规模 还 是 调整 尺寸 特效 , 如 果 使 用 原 规模 , 则 将 缩放 比例 设 成 百分之百 ， 
如 果 是 调整 尺寸 ， 则 设 定 消息 层 宽 和 高 。 第 16 行 利用 jQuery 的 show0O 函 数 调用 特效 ， 第 


1 个 参数 是 特效 名 称 ， 第 2 个 参数 是 特效 选项 ， 第 3 个 参数 是 


表示 回调 函数 。 第 19~23 行 表示 当 特 效 把 消息 层 显示 出 来 


村 效 持续 时 间 ， 第 4 个 参数 


后 间隔 一 秒 钟 隐藏 消息 层 。 页 面 的 初始 加 载 效果 如 图 13.3 


所 示 。 
13.2.2 百叶窗 效 果 


百叶 窗 效 果 使 用 了 jQuery UI 的 jquery.effects.core.js 和 
jquery.effects.blindjjs 文件 。 第 一 个 文件 是 动画 特效 的 核心 
文件 ， 其 中 提供 了 一 些 实现 特效 的 基本 和 常用 操作 函数 。 
第 二 个 文件 是 实现 百叶 窗 效 果 的 插件 文件 。 它 的 设计 思想 
是 根据 百叶 窗 打 开 方 向 设 定 动画 的 操作 高 度 或 者 宽度 ， 然 


Bing [| mn eee | 


click the button above to preview the effect, 


; 
太 100% ~ 


后 利用 自 定义 动画 实现 动画 效果 。 在 这 里 使 用 了 jQuery 的 


animateO 自 定义 动画 函数 来 完成 动画 效果 .cssO 样 式 设 定 函 “图 


13.3 jQuery UI 特 效 初始 页 面 


数 修改 消息 部 分 的 样式 , 主要 是 宽 和 高 两 个 参数 。hide() 为 隐藏 函数 , 将 消息 部 分 隐藏 起 来 ; 
height() 为 获取 元 素 高 度 函 数 。show0) 为 显示 元 素 函 数 。width() 为 获取 元 素 宽度 函数 。 主 要 


设计 思路 是 根据 动画 显示 方向 (纵向 或 横向 ) ， 通 过 自 定义 动画 


者 宽 调整 为 原始 大 小 。 下 面 看 一 下 百叶 窗 效果 插件 的 功能 代码 : 


1 (function( $, undefined ) { 
2 $.effects.blind = function(o) { 
3 return this.queue (function() { 


4 // 获 取 特 效 作 用 对 象 


西 的 特效 将 消息 部 分 的 高 或 
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5 Var el = $(this), props = ['position','top',"'bottom','left', 
eile ls 
6 // 设 置 运行 参数 
了 Var mode = $.effects.setMode(el, o.options.mode || 'hide'); 
// 设 置 对 象 的 显示 模式 
8 var direction = o.options.direction || "vertical'7 
// 设 置 动画 的 作用 方向 
9 // 调 整 对 象 状态 
10 $.effects.save(el，props); el.show(); // 存 储 对 象 ， 并 将 对 象 显示 出 来 
和 Var wrapper = $.effects.createWrapper (el) .css ({overflow: 'hidden'}); 
// 为 对 象 创建 一 个 外 部 封装 
12 var ref = (direction == 'vertical') ? 'height' : "width'; 
// 设 定 动画 变化 参考 方向 
// 设 定 包 含 封装 元 素 的 变化 距离 
下 3 var distance = (direction == 'vertical') ? wrapper.height() : 
wrapper .width(); 
14 if (mode == 'show') wrapper.css(ref，0);// 设 定 封装 元 素 的 初始 状态 
15 // 使 用 自 定义 动画 
16 var animation = {}; 
47 animation[ref] = mode == 'show' ? distance : 0; // 设 定 动画 参数 
18 // 对 封装 元 素 使 用 自 定义 动画 
19 wrapper .animate (animation, o.duration, o.options.easing, function() { 
20 if(mode == 'hide') el.hide(); // 隐 藏 元 素 
> $.effects.restore(lel, props); $.effects.removeWrapper (el); 
// 恢 复元 素 的 初始 状态 ， 并 移 除 封装 元 素 
22 if(o.callback) o.callback.apply(el[0], arguments); 
23 el.dequeue (); 
之 及 六 
25 ])27 
26 1}; 


27 }) (jQuery); 


对 于 插件 的 编写 要 在 第 15 章 才 会 介绍 ， 在 这 里 只 讨论 它 的 实现 过 程 。 上 述 代 码 第 3 
行 返回 当前 调用 插件 的 一 个 动画 队列 ， 并 在 这 个 队列 中 定义 了 回调 函数 实现 百叶 窗 效果 。 
第 5 行 创建 元 素 ， 接 收 调用 插件 的 对 象 ， 并 定义 位 置 选项 。 第 7 行 设置 选项 中 的 显示 模式 
为 隐藏 。 第 8 行 设置 选项 中 的 动画 方向 为 垂直 。 第 10 行 保存 元 素 对 象 的 位 置 ， 并 显示 元 素 
对 象 。 第 11 行 调用 了 jquery.effects.core.jjs 文件 中 创建 的 包装 元 素 函 数 <DIV>， 并 设 定 当 元 
素 内 容 溢 出 时 隐藏。 

第 12 行 根据 动画 方向 选择 修改 宽 或 者 高 属性 。 第 13 行 根据 动画 方向 选择 使 用 包装 元 
素 的 宽 或 者 高 的 属性 值 。 第 14 行 设置 如 果 元 素 是 显示 的 则 隐藏 。 第 16 行 定义 动画 参数 数 
组 。 第 17 行 根据 显示 状态 设置 设 定 动画 参数 数组 的 值 。 第 19 行 调用 包装 元 素 的 自 定义 动 
画 函 数 。 第 20 行 判断 显示 模式 ， 如 果 隐 藏 则 调用 元 素 对 象 的 隐藏 方法 。 第 21 恢复 先前 存 
储 的 元 素 属性 。 第 22 行 调用 回调 函数 。 第 23 行将 动画 从 队列 删除 。 为 了 能 够 看 清 效果 ， 
我 们 可 以 将 动画 时 间 延 长 。 效 果 如 图 13.4 和 图 13.5 所 示 。 


13.2.3 ”跳跃 效果 


跳跃 效果 需要 应 用 到 动画 特效 的 核心 文件 和 跳跃 效果 的 插件 文件 jquery.effects.bouncejs。 
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它 的 设计 思想 是 通过 设 定 动画 跳跃 的 行为 参数 、 跳 跃 次 数 、 跳 跃 高 度 、 跳 跃 用 时 、 循 环 调 


用 自 定义 动画 实现 跳跃 过 程 。 所 谓 跳 跃 ， 实 际 上 是 通过 变换 设 定 元 素 的 顶端 坐标 值 来 完成 
的 。 这 里 主要 使 用 了 jQuery 的 animateO 自 定义 动画 函数 、css0 样 式 设 定 函数 、show0O 显 示 
元 素 函 数 。 主 要 设计 思路 是 通过 不 断 改 变 消息 部 分 的 项 端 坐标 位 置 来 实现 跳跃 动画 效果 。 
插件 源 代码 如 下 : 


[- 


[= 1 5 | [Be 有 ex™) 
es 
EE 人 pp 


(3 
x 巷 - | 加 Debugsar 仿 "| 加 | 画 ~ x 问 " | 加 DebugBar 履 "| 四 | 豆 -| 


Show 


Eriam ber neque, luctus 3, aleilend ner, semper 


Bind [a])| rmi Bing [a] rmi | 
Cllck the button above to preview the effect. Click the button above to preview the sffect. 
4 nn » 4 mm 上 让 
fileyYWDyWriteBooKMiQusrySite/plugi 或 100% ~ file///D/WriteBook/jQuerySite/plugit 乳 100% 
图 13.4 百叶 窗 效果 一 图 13.5 百叶 窗 效果 二 


1 (function( $, undefined ) { 

2 $.effects.bounce = function(o) { 
3 return this.queue (function() { 
4 
5 


// 获 取 特 效 作用 对 象 
var el = $(this), props = ['position','top','bottom','left', 
TDE SR 


// 设 置 动画 运行 参数 

Var mode = $.effects.setMode(el, o.options.mode || 'effect'); 
// 设 置 对 象 的 显示 模式 

var direction = o.options.direction || 'up';  // 设 置 动画 方向 

var distance = o.options.distance || 20; // 默 认 动 画 运行 距离 

var times = o.options.times || 5; // 设 置 动 画 持续 次 数 

var speed = o.duration || 250; // 设 置 每 次 跳动 速度 


if (/showlhide/.test(mode)) props.push('opacity');// 设 置 透明 参数 
// 调 整 对 象 


$.effects.save(el, props); el.show(); // 存 储 对 象 ， 并 显示 对 象 
$.effects.createWrapper (el); // 创 建 对 象 的 封装 元 素 
Var ref = (direction == 'up' || direction == 'down') ? 'top' : 'left'; 
// 设 定 动画 运行 参考 坐标 
Var motion = (direction =— 'up' || direction 一 'left') ? 'pos' : 'neg'; 
// 设 定 动画 动作 参数 
var distance = o.options.distance || (ref == 'top' ? el.outerHeight 
({margin:true}) / 3 : el.outerWidth({margin:true}) / 3); 
// 设 定 动画 初次 实际 运行 距离 
if (mode == 'show') el.css('opacity', 0) .css (ref，motion == 'pos' ? 
-distance : distance); // 设 定 样式 
if (mode == "hide') distance = distance / (times * 2); 
// 如 果 对 象 隐藏 则 动画 距离 缩减 
if (mode != "hide') times——; // 动 画 执行 次 数 递减 
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26 
27 
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29 
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36 
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43 


44 
45 
46 
47 
48 
49 


50 


1 
到 
53 
54 
355 
56 


57 }; 


// 使 用 自 定义 动画 


if (mode == "show") // 第 一 次 显示 跳跃 动画 
Var animation = {opacity: 1}; // 设 置 透 明度 
animation[ref] = (motion == "pos' ? '+=' : '-=') + distance; 
// 设 定 初次 向 上 跳跃 
el.animate (animation，speed / 2，o.options .easing) ;// 执 行动 画 
distance = distance / 2; // 跳 动 距离 减 半 
times-—; // 跳 动 次 数 自 减 
}; 
for (var i = 0; i < times; i++) { // 循 环 跳动 3 次 
var animationl = {}, animation2 = {}; 
animationl[ref] = (motion == "pos' ? '-=' : '+=') + distance; 
// 向 下 跳动 
animation2[ref] = (motion == "pos' ? '+=' : '-=') + distance; 


// 向 上 跳动 
el.animate (animationl, speed / 2, o.options.easing) .animate 
(animation2, speed / 2, o.options.easing); 


distance = (mode == 'hide') ? distance * 2 : distance / 2; 
// 跳 动 距离 减 半 
}; 
if (mode == 'hide') { 
var animation = {opacity: 0}; 
animation[ref] = (motion == 'pos' ? '-=' : '+=') + distance; 


el.animate (animation, speed / 2, o.options.easing, function(){ 
el.hide(); // Hide 
$.effects .restore (el，Props) ; $.effects.removeWrapper (el); 


// 移 除外 部 封装 
if(o.callback) o.callback.apply (this, arguments); 

// 回 调 方法 

1D); 

} else { // 最 后 一 次 跳动 

var animationl = {}, animation2 = {}; 

animationl[ref] = (motion == 'pos' ? '-=' : '+=') + distance; 

animation2[ref] = (motion == "pos' ? '+=' : '-=') + distance; 


el.animate (animation1l, speed / 2, o.options.easing) .animate 
(animation2, speed / 2, o.options.easing, function(){ 
$.effects.restore(lel, props); $.effects.removeWrapper (el); 
// 恢 复 对 象 
if(o.callback) o.callback.apply (this, arguments); 
DD); 
}; 
el.queue('fx', function() { el.dequeue(); }); 
el.dequeue (); 


58 }) (jQuery); 

上 述 代码 第 7 行 设置 显示 模式 。 第 8 一 11 行 设 定 跳跃 行为 参数 、 跳 动 方向 、 跳 动 距离 、 
跳动 次 数 、 跳 动 间隔 。 第 12 行 避免 正 对 于 透明 度 的 问题 设置 。 第 13、14 行 保存 元 素 对 象 
属性 并 显示 。 第 15 行 创建 包装 标记 。 第 16 行 根据 跳跃 方向 选择 坐标 类 型 。 第 17 行 根据 跳 
跃 方向 选择 操作 参数 。 第 18 行 获取 跳跃 距离 。 第 19 行 设置 如 果 元 素 为 显示 状态 则 转换 。 
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第 20 行 设置 如 果 元 素 为 隐藏 状态 则 距离 递减 。 | 本 | 
第 21 行 设置 如 果 模式 不 是 隐藏 则 跳跃 次 数 减 1。 第 。 | 人 各 和 ee 
23 一 29 行 利 用 自 定 义 动画 行 执行 跳跃 动画 。 第 30 一 36 Show 
行 利用 自 定义 动画 上 下 跳跃 循环 .第 37~45 行 利 用 自 定 | See 
义 动 画 最 后 一 次 跳跃 ， 并 恢复 元 素 属性 , 移 除 包装 元 素 ， 
调用 回调 函数 。 第 46~53 行 利用 自 定义 动画 继续 跳跃 ， | 
并 恢复 元 素 属性 , 移 除 包装 元 素 , 调用 回调 函数 。 第 55、 


日 | 各 -| 


56 行 从 队列 删除 动画 。 效 果 如 图 13.6 所 示 。 Bounce [sl rama 
13.2.4 缩减 效果 Click the button above to preview the effect. 


4 mn ; 
| 一 


缩减 效果 需要 应 用 到 动画 特效 的 核心 文件 和 缩减 效 
果 的 插件 文件 jquery.effects.clip.js。 它 的 设计 思想 是 设 定 
元 素 起 始 出 现 位 置 ， 即 元 素 高 度 的 一 半 ， 然 后 元 素 的 上 下 两 部 分 依次 向 两 边 展 开 。 插 件 源 
代码 如 下 : 


图 13.6 ”跳跃 动画 效果 


1 (function( $, undefined ) { 

2 $.effects.clip = function(o) { 

3 return this.queue (function() { 

4 // 获 取 动 画作 用 对 象 

var el = $ (this), props = ['position','top','bottom','left', 'right', 
"height', 'width']; 


6 // 设 置 对 象 运行 参数 
Fy Var mode = $.effects.setMode (el, o.options.mode || 'hide'); 
// 设 置 显示 方式 
8 var direction = o.options.direction || 'vertical'; // 默 认 动画 方向 
9 // 调整 对 象 状态 
10 $.effects.save(lel, props); el.show(); // 存 储 对 象 并 显示 
让 二 Var wrapper = $.effects.createWrapper (el) .css ({overflow: 'hidden'}); 
// 创 建 封装 元 素 
2 Var animate = el[0] .tagName == 'IMG' ? wrapper : el; 
// 获 取 动 画作 用 对 象 
3 var ref = { // 动 画 运行 参数 
4 size: (direction == 'vertical') ? 'height' : 'width'， 
15 Position: (direction == 'vertical') ? 'top' : 'left' 
16 }; 
汪 邓 var distance = (direction 一 'vertical') ? animate.height() : animate. 
width() // 获 取 动 画 运行 距离 
18 if(mode == 'show') { animate.css (ref.size, 0); animate.css (ref. 
position,distance / 2); } // 初 始 动画 对 象 
19 // 使 用 自 定 义 动画 对 象 
20 var animation = {}; 
2 animation[ref.size] = mode == 'show' ? distance : 0; 
// 设 定 完整 显示 对 象 高 度 
22 animation[ref.position] = mode == 'show' ? 0 : distance / 2; 
// 设 定 开始 动画 位 置 ， 为 高 度 一 半 
23 // 使 用 自 定义 动画 
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24 animate -animate (animation, { queue: false, duration: o.duration, 
easing: o.options.easing, complete: function() { 

EE if(mode == "hide') el.hide(); // 隐 藏 对 象 

26 $.effects.restore(el, props); $.effects.removeWrapper (el); 

// 恢 复 对 象 ， 并 移 除 封装 

Pah if(o.callback) o.callback.apply(el[0], arguments); 

28 el.dequeue (); 

29 站 后 

30 1); 

31 }; 


32 }) (jQuery); 


上 述 代码 同 百叶 窗 效果 类 似 ， 也 是 使 用 包装 元 素 


好汉 区 
<DIV> 实 现 消息 层 的 大 小 动画 。 但 是 ， 这 个 插件 的 显示 是 lr 到 民 


从 消息 层 垂直 方向 的 中 间 位 置 向 上 下 扩展 ， 效 果 如 图 13.7 
所 示 。 | me 


13.2.5 ”移动 效果 


Cip [el wwe] 


移动 效果 需要 应 用 到 动画 特效 的 核心 文件 和 移动 效 Click the button above to preview the effect. 


果 的 插件 文件 jquery.effects.dropjs。 它 的 设计 思想 类 似 于 


; 


[EEC 本 100% 


fee 只 是 在 移动 过 程 中 通过 一 次 自 定义 动画 将 元 素 


台 左 端 位 置 加 上 一 定 的 像素 值 ， 使 元 素 向 右 移动 。 插 件 图 13.7 缩减 动画 效果 


9 如 下 : 


(function( $, undefined ) { 
$.effects.drop = function(o) { 


1 
这 
3 return this.queue (function() { 
4 // 获 取 动 画作 用 对 象 

5 


var el = $ (this), props = ['position', 'top','bottom', 'left', 'right', 


"opacity']; 


6 // 设 定 动画 参数 
了 var mode = $.effects.setMode (el, o.options.mode || 'hide'); 
// 设 定 对 象 显示 模式 
8 var direction = o.options.direction || 'left'; // 默 认 动画 移动 方向 
9 // 调 整 对 象 
10 $.effects.save(el, props); el.show(); // 存 储 原 对 象 并 显示 
到 下 $.effects.createWrapper (el); // 创 建 对 象 的 封装 
12 Var ref = (direction == 'up' || direction == 'down') ? 'top' : 'left'; 
// 创 建 动 画 运行 参考 坐标 方向 
3 Var motion = (direction 一 'up' || direction 一 'left') ? 'pos' : 'neg' 
// 创 建 动画 动作 参数 
14 var distance = o.options.distance || (ref == 'top' ? el.outerHeight 
({margin:true}) / 2 : el.outerWidth({margin:true}) / 2); 
// 设 定 动画 实际 运动 距离 
// 转 换 对 象 初始 状态 
Ss if (mode == 'show') el.css('opacity', 0) .css(ref, motion == 'pos' ? 


-distance : distance); 


16 // 使 用 自 定义 动画 
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17 


18 


27 1)s; 
28 1}; 


Var animation = {opacity: mode == 'show' ? 1 : 0}; 

// 设 定 动画 中 需要 改变 的 透明 度 
animation[ref] = (mode == 'show' ? (motion == 'pos' ? '+=' : '-=') : 
(motion == 'pos' ? '-=' : '+=')) + distance; 

// 设 定 动画 运动 最 终 目标 参数 值 
// 运 行动 画 


el.animate (animation, { queue: false, duration: o.duration, easing: 
o.options.easing, complete: function() 


if(mode == "hide') el.hige(); // 隐 藏 对 象 
$.effects.restore(el, props); $.effects.removeWrapper (el); 
// 恢 复 对 象 ， 移 除 封装 
if(o.callback) o.callback.apply (this, arguments); 
el.dequeue (); 
Py) 


29 }) (jQuery); 


上 述 代码 第 


8 行 设 定 动画 移动 方向 向 左 。 第 13 行 设 定 如 果 动 画 移动 方向 向 左 ， 设 定 


操作 参数 。 第 14 行 设 定 动画 移动 距离 。 第 15 行 转换 移动 位 移 为 负 值 ， 实 际 向 右 移动 。 第 
17 行 设 定 透 明度 。 第 18 行 设 定 自 定义 动画 参数 。 第 20 一 26 行 执行 自 定 义 动画 并 恢复 元 素 
属性 ， 调 用 回调 函数 。 效 果 如 图 13.8 所 示 。 


yf 


上 
pr 一 


二 


Cr | 


Click the button above to preview the effect. 


[Re//D/ WiteBook/QverySite/plugins/dialog/UIDialog/demos/show/defau 


图 13.8 ”移动 动画 效果 


13.2.6 ”分 裂 效果 


分 裂 效果 需要 应 用 到 动画 特效 的 核心 文件 和 分 裂 效果 的 插件 文件 jquery.effects.explodejs。 
它 的 设计 思想 是 复制 多 个 元 素 ， 元 素 个 数 由 动画 排列 的 行 数 和 列 数 决定 ， 将 复制 出 的 多 个 
元 素 通过 自 定义 动画 变换 坐标 位 置 由 显示 区 域 远 端 向 中 间 移 动 完成 效果 。 插 件 源 代码 如 下 : 


a ke 
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(function( $, undefined ) { 
$.effects.explode = function(o) { 
return this.queue (function() { 
Var rows = o.options.Pieces ? Math.round (Math.sqrt(o.options.pieces)) : 3; 


// 获 取 动 画 中 行 的 个 数 


var cells = o.options .pieces ? Math.round (Math.sqrt (0o.options.pieces)) : 3; 


// 获 取 动 画 中 列 的 个 数 


// 设 定 动画 显示 参数 

o.options.mode = o.options.mode == 'toggle' ? ($(this) .is(':visible') ? 
"hide' : 'show') : o.options.mode; 

var el = $(this) .show() .css('visibility', 'hidden'); 


Var offset 


// 获 取 动 画作 用 对 象 并 显示 


= el.offset() // 取 得 对 象 相对 于 浏览 器 的 坐标 位 置 


// 设 定 左上 角 坐 标 位 置 
offset.top -= parseInt (el.css("marginTop"),10) 11 0; 
offset.left -= parseInt (el.css("marginLeft"),10) || 0; 


var width = 


var height 


el.outerWidth (true); // 元 素 宽度 


= el.outerHeight (true); / /元素 高 度 


for (var i=0;i<rows;i++) { // 按 照 行 数 循环 
for (var j=0;j<cells;j++) { // 按 照 列 数 循环 


el 


5 


.clone () // 克 隆 对 象 
.appendTo ('body') // 添 加 到 页 面 中 
.Wrap('<div></div>') // 为 每 一 个 复制 出 来 的 元 素 用 层 封装 
.css({ 
Position: 'absolute'， 
visibility: 'visible', 
left: -j* (width/cells) ， 
top: -i*(height/rows) 
}) // 设 定 每 个 复制 元 素 的 位 置 并 根据 行 和 列 位 置 设 定 高 和 宽 
.Parent () // 获 取 封 装 层 
.addClass ('ui-effects-explode') // 在 层 上 加 入 样式 设 定 
.css({ // 设 定 封装 层 的 位 置 及 尺寸 
Position: 'absolute'， 
overflow: 'hidden' ， 
width: width/cells， 
height: height/rows, 
left: offset.left + j*(width/cells) + (o.options .mode 
== 'show' ? (j-Math.floor(cells/2))*(width/cells) : 0)， 
top: offset.top + i*(height/rows) + (o.options .mode == 
'show' ? (i-Math.floor(rows/2))*(height/rows) : 0) ， 
opacity: o.options.mode == 'show' ?0 :1 
1) .animate ({ // 利 用 自 定义 动画 变化 封装 层 的 位 置 
left: offset.left + j*(width/cells) + (o.options .mode 
== 'show' ?0 : (j-Math.floor(cells/2))*(width/cells)), 
top: offset.top + i*(height/rows) + (o.options .mode == 
'show' ? 0 : (i-Math.floor (rows/2))*(height/rows)), 
opacity: o.options.mode == 'show' ?1 : 0 
}, o.duration || 500); 


|; 
// 当 动画 完成 设 定 定时 函数 
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44 setTimeout (function() { 


// 设 定 对 象 是 否 显示 
45 o.options.mode == 'show' ? el.css({ visibility: "visible' }) : el. 
css({ visibility: "visible' }).hide(); 
46 if(o.callback) o.callback.apply(el[0]); 
47 el.dequeue (); 
48 $('div.ui-effects-explode') .remove(); // 移 除 封 装 层 
49 }, o.duration 11 500); 
50 1); 


51}; 
52}) (jQuery); 


上 述 代码 第 4、5 行 设 定 了 分 裂 显 示 时 的 行 和 列 的 数目 。 第 6 行 设 定 显示 模式 。 第 7 


行 获取 隐藏 元 素 对 象 。 第 8 行 获取 元 素 相 对 于 浏览 器 窗口 的 坐标 位 置 。 第 10、11 行将 元 素 
的 左上 角 坐 标 值 分 别 减 去 边界 空白 宽度 。 第 12、13 行 获取 元 素 的 外 部 宽 和 外 部 高 , 包括 边 
框 和 边界 空白 。 第 14 一 42 行 根 据 行 和 列 的 个 数 循环 复制 多 个 消息 部 分 , 并 设 定 每 个 复制 出 


来 


成 - 


用 


的 消息 层 的 起 始 位 置 ， 然 后 使 用 自 定义 动画 函数 ， 将 每 个 消息 层 显 示 在 指定 位 置 ， 拼 凑 
-个 完整 的 消息 层 。 第 44 一 49 行 设 定 一 个 超时 函数 ， 实 现 消 息 层 的 显示 状态 转换 ， 并 调 
回调 函数 ， 删 除 队 列 ， 移 除 CSS 样式 设 定 。 效 果 如 图 13.9 所 示 。 


pg 
加 DAWriteBookNQuerySite\plugins\d PD - OX jQuer.. x 9 


Explode [el][ rn exec | 


Click the button above to preview the effect. 
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图 13.9 ”移动 动画 效果 


13.2.7” 折 又 效果 


它 


折 革 效果 需要 应 用 到 动画 特效 的 核心 文件 和 折合 效果 的 插件 文件 jquery.effects.foldjs。 
的 设计 思想 是 按照 一 定 的 折合 方向 和 折合 比 例 ， 将 元 素 用 自 定义 动画 多 次 修改 坐标 位 置 


实现 。 插 件 源 代码 如 下 : 


1 (function( $, undefined ) { 
2 $.effects.foild = function(o) { 
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3 return this.dqueue (function() { 


4 // 获取 动画 作用 的 对 象 
5 Var ell= (this), props = [posittion, top PoEEOm ef 
wright 
6 // 设 定 动画 参数 
7 Var mode = $.effects.setMode (el, o.options.mode || 'hide'); 
// 设 定 对 象 显示 模式 
8 var size = o.options.size || 15; // 设 定 默 认 折 车 大 小 
9 var horizFirst = !(!0o.options.horizFirst); // 是 否 是 起 始 水 平 折 车 
10 var duration = o.duration ? o.duration / 2 : $.fx.speeds. default / 2; 
// 动 画 持续 时 间 
OE // 调整 对 象 
2 $.effects.save(lel, props); el.show(); // 存 储 对 象 并 显示 
13 var wrapper = $.effects.createWrapper (el) .css ({overflow: 'hidden'}); 
// 创 建 封装 元 素 
14 var widthFirst = ((mode == 'show') != horizFirst); 
// 设 定 是 否 是 首次 修改 宽度 
15 Var ref = widthFirst ? ['width', 'height'] : ['height', 'width']; 
// 设 定 动画 操作 相关 参数 
// 根 据 封装 元 素 的 宽 或 者 高 设 定 动画 距离 
16 var distance = widthFirst ? [wrapper.width(), wrapper.height()] : 
[wrapper.height(), wrapper.width()]; 
17 var percent = /([0-9]+)%/.exec (size); // 计 算 百 分 比 
18 if (Percent) size = parseInt (percent[1] ,10) / 100 * distance [mode == 
ides 2 0 Tl // 设 定 折合 距离 
19 if (mode == ' show') wrapper.css (horizFirst ? {height: 0, width: size} : 
{height: size, width: 0}); // 初 始 状 态 
20 // 使 用 动画 
dl var animationl = {}, animation2 = {}; 
animationl[ref[0]] = mode == 'show' ? distance[0] : size; 
// 横 向 展开 参数 
人 3 animation2[ref[1]] = mode == 'show' ? distance[1] : 0; 
// 纵 向 展开 参数 
24 // 调用 自 定义 动画 
25 wrapper .animate (animationl, duration, o.options.easing) 
26 .animate (animation2, duration, o.options.easing, function() { 
27 if(mode == 'hide') el.hide(); // 隐 藏 元 素 
28 $.effects.restore(lel, props); $.effects.removeWrapper (el); 
// 恢 复 对 象 并 移 除 封装 
29 if(o.callback) o.callback.apply (el[0], arguments); 
30 el.dequeue (); 
31 D); 
32 1); 
33}; 


34}) (jQuery); 


上 述 代码 第 8 行 设 定 默 认 折 县 效果 大 小 。 第 9 行 确认 首次 折合 是 水 平方 向 折合 。 


第 10 


行 设 定 动画 持续 时 间 。 第 14、15 行 确认 两 次 折合 的 先后 参数 。 第 16 行 确认 两 次 折合 的 先 


后 参数 值 。 第 17 行 确认 折合 比例 百分比 。 第 18 行 确认 折合 效 果 大 小 。 第 19 行 转换 


包装 后 


的 元 素 样式 。 第 25~31 行 调用 自 定义 动画 实现 折 难 打开 效果 ， 并 删除 包装 元 素 ， 调 
函数 ， 从 队列 中 删除 。 效 果 如 图 13.10 和 图 13.11 所 示 。 


“O's 
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Click the button above to Preview the effect. 
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图 13.10 折 革 动画 效果 横向 打开 
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cllck the button above to preview the effect. 
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图 13.11 折 革 动画 效果 纵向 打开 


13.2.8 ”高 亮 淡 入 淡出 效果 


高 亮 淡 入 淡出 效果 需要 应 用 到 动画 特效 的 核心 文件 和 高 亮 效果 的 插件 文件 
jquery.effects.highlight.js。 它 的 设计 思想 比较 简单 ， 就 是 频繁 更 换 背 景色 及 透明 度 来 实现 效 
果 。 插 件 源 代码 如 下 : 

1 (function( $, undefined ) { 


2 $.effects.highlight = function(o) { 
中 return this .queue (function () { 


4 var elem = $ (this), // 获 取 动画 作用 对 象 

5 props = ['backgroundImage', 'backgroundColor'， "opacity'"]， 

6 mode = $.effects.setMode (elem, o.options.mode || 'show'), 
// 设 置 对 象 显示 模式 

和 animation = { 
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8 backgroundColor: elem.css('backgroundColor') 

je // 动 画 背 景色 参数 

10 Fncas hqe // 动 画 透明 度 参 数 

了 animation-opacity = 0; 

二 全 | 

了 $.effects.save(elem, props); // 存 储 对 象 

14 elem 

15 -show() // 显 示 对 象 

16 -css({ 

4 backgroundImage: 'none', 

18 backgroundColor: o.options.color || '#ffff99' 

19 }) // 去 除 背 景 图 片 ， 设 定 背 景色 

20 -animate (animation, { // 自 定义 动画 效果 

本 queue: false， 

22 duration: o.duration, 

23 easing: o.options.easing, 

24 complete: function() { 

25 (mode == 'hide' &g elem.hide()); 

26 $.effects.restore (elem, props); 

2 (mode == 'show' && 1$.supPort.opacity && this.style. 
removeAttribute('filter')); 

28 (o.callback && o.callback.apply (this, arguments)); 

29 elem.dequeue (); 

30 } 

31 D); 

32 ))5 

33}; 


34}) (jQuery); 
上 述 代码 第 7 一 9 行 设 定 动画 需要 的 背景 色 参 数 。 第 18 行 设 定 背 景色 。 第 20~31 行 
调用 自 定 义 动 画 ， 更 换 背景 色 ， 调 用 回调 函数 ， 删 除 队 列 。 效 果 如 图 13.12 所 示 。 
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Click the button above to preview the effect. 
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图 13.12 背景 高 亮 动画 效果 
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13.2.9 脉冲 闪烁 效果 


脉冲 闪烁 效果 需要 应 用 到 动画 特效 的 核心 文件 和 闪烁 效果 的 插件 文件 
jquery.effects.pulsate.js。 它 的 设计 思想 是 利用 自 定义 动画 函数 频繁 变化 元 素 透 明度 来 完成 效 
果 。 插 件 源 代码 如 下 : 


1 
多 
3 
4 
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a 


区 
| 
24 
yy 
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28 
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(function( $, undefined ) { 
$.effects.pulsate = function(o) { 
return this.queue (function () { 


1D); 
}; 


var elem = $ (this)，// 获 取 动 画作 用 对 象 


mode = $.effects.setMode (elem, o.options.mode || 'show'); 
// 设 置 对 象 显示 模式 


times = ((o.options.times || 5) * 2) - 1; // 设 定 动画 次 数 
duration = o.duration ? o.duration / 2 : $.fx.speeds. default / 2, 


// 设 定 动画 持续 时 间 
isVisible = elem.is(':visible'), // 判 断 对 象 的 可 见 状态 
animateTo = 0; // 显 示 状 态 切 换 标志 

if (!isVisible) { 
elem.css('opacity', 0).show(); // 显 示 对 象 
animateTo = 1; // 显 示 状 态 


} 
if ((mode == 'hide' && isVisible) || (mode == 'show' && !isVisible)) { 
times——; // 动 画 次 数 自 减 
} 
for (var i = 0; i < times; i++) { 
elem.animate ({ opacity: animateTo }, duration, o.options.easing); 
// 自 定义 动画 调整 对 象 透明 度 
animateTo = (animateTo + 1) % 2;  // 更 改 显示 状态 标志 
| 
// 最 后 操作 动画 
elem.animate({ opacity: animateTo }, duration, o.options.easing, 
function() { 
if (animateTo == 0) { 
elem.hide(); 
1 
(o.callback && o.callback.apply (this, arguments)); 
1D); 
elem 
.queue('fx', function() { elem.dequeue(); }) 
.dequeue (); 


32}) (jQuery); 

上 述 代 码 第 6 行 设 定 闪 烁 次 数 。 第 7 行 设 定 闪 烁 间隔 。 第 10 一 13 行 判断 元 素 是 否 可 
见 ， 如 果 不 可 见 则 透明 度 为 零 ， 调 用 显示 ， 设 定 透 明度 变量 值 为 1。 第 14 一 16 行 修改 闪烁 
次 数 。 第 17 一 20 行 根据 循环 次 数 调 用 自 定义 动画 函数 交叉 修改 元 素 的 可 见 性 。 第 21 一 26 
行 调用 自 定义 动画 函数 设置 透明 度 ， 并 调用 回调 函数 。 效 果 如 图 13.13 所 示 。 
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Click the button above to preview the effect 


图 13.13 脉冲 闪烁 动画 效果 


13.2.10 ”摆动 效果 


摆动 效果 需要 应 用 到 动画 特效 的 核心 文件 和 摆动 效果 的 插件 文件 jquery.effects.shake.js。 
它 的 设计 思想 和 跳跃 效果 基本 相同 ， 只 是 摆动 方向 为 左右 方向 ， 并 且 在 摆动 过 程 中 的 第 一 
次 摆动 、 最 后 一 次 摆动 及 中 间 的 摆动 距离 考虑 的 设 定 比 跳跃 效果 复杂 。 插 件 源 代码 如 下 : 

1 (function( $, undefined ) { 

2 $.effects.shake = function(o) { 


3 


4 
和 


ON 


return this.queue (function() { 


// 获 取 动画 作用 对 象 
var el = $(this), props = ['position','top','bottom','left', 
Otto 


// 设 定 动画 运行 参数 
var mode = $.effects.setMode(el, o.options.mode || 'effect'); 
// 设 定 效 果 模 式 
var direction = o.options.direction 11 'left'; // 设 定 默认 移动 方向 
var distance = o.options.distance || 20; // 设 定 默认 移动 距离 
var times = o.options.times || 3; // 设 定 动画 次 数 
Var speed = o.duration || o.options.duration || 140; 
// 设 定 默 认 动 画 速 度 
// 调 整 对 象 
$.effects.save(lel, props); el.show(); // 存储 并 显示 对 象 
$.effects.createWrapper (el); // 创建 封装 对 象 
Var ref = (direction == 'up' || direction == 'down') ? 'top' : 'left'; 
// 创 建 动画 作用 方向 参数 
Var motion = (direction 一 'up' || direction == 'left') ? 'pos' : 'neg'; 
// 设 定 运 动 方式 
// 使 用 自 定 动画 
var animation = {}, animationl = {}, animation2 = {}; 
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35}; 


]}) 7 


animation[ref] = (motion == "pos' ? '-=' : '+=') + distance; 
// 设 定 最 后 一 次 左 向 摆动 距离 值 
animationl[ref] = (motion == "pos' ? '+=' : '-=') + distance * 27 


// 设 定 最 后 一 次 右 向 摆动 距离 什 


“== "4=") + distance * 28 


// 设 定 最 后 一 次 左 向 摆动 距离 什 


animation2 [ref] = (motion == "pos 


// 首 次 调用 自 定义 动画 参数 
el.animate (animation, speed, o.options.easing); 
for (var i = 1; i < times; i++) { // 循 环 调 用 自 定义 动画 ， 实 现 拌 动 效果 
el.animate (animationl, speed, o.options.easing) .animate 
(animation2, speed, o.options.easing); 
}; 
el.animate (animationl, speed, o.options.easing). 
animate (animation, speed / 2, o.options.easing, function(){ 
// 最 后 一 次 抖动 效果 
$.effects.restore(el, props); $.effects.removeWrapper (el); 
// 恢 复 对 象 并 移 除 封装 
if(o.callback) o.callback.apply (this, arguments); // Callback 
1); 
el.queue('fx', function() { el.dequeue(); }); 
el.dequeue (); 


36}) (jQuery); 

上 述 代码 第 8 行 设 定 默认 摆动 方向 。 第 9 行 设 定 摆动 距离 。 第 10 行 设 定 摆动 次 数 。 
第 11 行 设 定 动画 持续 时 间 。 第 19 一 21 行 设 定 三 个 动画 摆动 距离 。 第 23 行 设 定 第 一 次 摆动 
向 右 。 第 24 一 26 行 设 定 根据 摆动 次 数 多 次 摆动 ， 但 摆动 距离 比 第 一 次 多 一 倍 。 第 27 一 31 
行 设 定 最 后 一 次 摆动 ， 并 调用 回调 函数 。 效 果 如 图 13.14 和 图 13.15 所 示 。 


三 iauen UI Effects - Show .- 
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Click the button above to preview the effect. 
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图 13.14 ”摆动 动画 效果 一 


六 


第 2 篇 jQuery 实战 开发 与 应 用 


目 ] pvwritegookjQuensieipuginsd 避 ~ © X|| EjQuery Ul Effects - show .. x 


[Snake 


加 [neee | 


Click the button above to preview the effect 


jQuery 动画 效果 能 够 给 用 户 更 愉悦 的 体验 ， 也 能 让 用 户 看 到 更 生动 的 页 面 。 本 章 主 要 
介绍 了 jQuery 动画 函数 ， 如 何 利用 动画 函数 产生 动画 效果 ， 以 及 jQuery UI 提供 的 动画 效 
果 。 重 点 内 容 是 利用 动画 函数 产生 动画 效果 ,jQuery UI 提供 的 动画 效果 。 利 用 动画 函数 产 
生动 画 效果 是 本 章 的 难点 部 分 。 下 一 章 将 介绍 jQuery 拖 放 组 件 。 


【习题 1】 利 用 本 章 所 学 内 容 自 定 义 图 片 的 横向 抖动 效果 。 


图 13.15 ”摆动 动画 效果 二 


13.3: 本 结 


13.4 习 题 


【习题 2】 利用 图 片 练习 jQuery UI 的 动画 效果 。 
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现在 很 多 网 页 都 具有 页 面 元 素 ， 如 图 片 、 文 字段 落 、 表 格 等 ， 可 以 通过 鼠标 拖 动 变换 
位 置 ， 如 博客 。 这 种 拖 动 效果 可 以 通过 jQuery 的 拖 动 插件 来 实现 。 这 种 拖 动 功能 方便 用 户 
重新 安排 页 面 布 局 ， 便 于 用 户 指定 符合 自己 风格 的 页 面 格式 。 本 章 主 要 讲解 jQuery 中 的 拖 
动 插件 。 


14.1 jQuery UI 拖 动 插件 


本 节 介绍 jQuery UI 工 具 集 中 的 拖 动 插件 draggable。 这 个 插件 可 以 通过 鼠标 拖 动 页 面 
元 素 至 你 想 要 的 位 置 。 它 需要 UI Core、UI Widget、UI Mouse 库 文 件 的 支持 。 


14.1.1 jQuery UI 拖 动 插件 基本 介绍 


jQuery UI 拖 动 插件 的 基本 属性 如 表 14.1 所 示 。 
表 14.1 拖 动 插件 的 属性 说 明 


属 性 类 型 说 了 明 
disable 布尔 拖 动 插件 是 否 可 用 
addClasses 布尔 是 否 添加 新 的 拖 动 元 素 样式 
appendTo 元 素 或 者 选择 器 让 加 一 个 元 素 到 插件 容器 中 
axis 字符 串 拖 动 方向 轴 ， 水 平和 垂直 两 个 方向 
cancel 选择 器 "input,option' | 取消 一 个 指定 的 元 素 拖 动 


允许 将 一 个 元 素 拖 动 到 可 排序 表格 中 
拖 动 行为 的 页 面 范 围 ， 可 在 页 面 的 有 边界 区 


connectToSortable | 选择 器 
选择 器 , 元 素 , 字 


containment 


符 串 ， 数 组 间 内 拖 动 
cursor 字符 串 拖 动 时 鼠标 样式 
cursorAt 对 象 设 定 拖 动 元 素 与 鼠标 的 相对 位 移 
delay 整 型 0 拖 动 动作 的 延迟 时 间 ， 从 鼠标 按 下 开始 计算 
dist 整 型 鼠标 按 下 并 移动 有 效 距离 后 才 开 始 拖 动 ， 单 
2 位 为 像素 
grid 数组 false 捕捉 拖 动 元 素 到 网 格 
handle 元 素 ， 选 择 器 false 单 击 元 素 限制 拖 动 开始 
helper 字符 串 ， 函 数 "original' 允许 一 个 操作 元 素 进 行 拖 动 显示 


iFrameFix 布尔 ， 选 择 器 false 在 拖 动 过 程 中 阻止 Frame 捕捉 鼠标 移动 
opacity 浮 点 false 当 被 拖 动 时 是 否 透明 
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属 性 类 型 说 了 明 
a 布尔 i po 时 刷新 所 有 拖 动 元 素 的 
revert 布尔 ， 字 符 串 false 当 拖 动 结束 后 元 素 是 否 返 回 起 始 位 置 
revertDuration 整 型 500 返回 起 始 位 置 的 动画 持续 时 间 ， 单 位 为 毫秒 
scope 字符 串 "default 可 拖 动 元 素 分 组 范围 
scroll 布尔 true 当 拖 动 时 容器 是 否 自动 深 动 
scrollSentivity 整 型 20 可 见 部 分 的 滚动 距离 敏感 什 
scrollSpeed 整 型 20 窗口 滚动 速度 ， 鼠 标 在 滚动 距离 敏感 值 内 
Snap 布尔 ， 选 择 器 false 捕捉 移动 边界 的 元 素 
snapMode 字符 串 "both' 确定 哪个 边界 被 捕捉 
snapTolerance 整 型 20 捕捉 到 边界 元 素 的 距离 
stack 选择 器 false 控制 层 上 下 关系 的 集合 
ZIndex 整 型 false 当 元 素 被 拖 动 时 层 的 上 下 关系 
它 还 具有 一 些 拖 动 事件 和 方法 ， 如 表 14.2 和 表 14.3 所 示 。 
表 14.2 拖 动 插件 的 事件 说 明 
事 件 | 类 型 

create 

start 

drag | a 

stop 


万 
dy 
isabie 到 用 括 人 
cnable 自用 括 作 


option .draggable( "option" , optionName , [value] ) 获取 或 设置 插件 属性 
option .draggable( "option" , options ) -次 设 定 多 个 插件 属性 
widget .draggable( "widget" ) 返回 插件 样式 元 素 


14.1.2 jQuery UI 拖 动 插件 示例 


1. 插件 的 基本 使 用 


这 个 示例 
为 其 添加 任何 

1 <scr 

吕 $ (fu 

3 

昌 1); 

Se 


人 


使 用 了 插件 的 属性 默认 值 形式 ， 具 有 基本 的 拖 动 功能 ， 在 插件 初始 化 时 没有 


附加 特性 。 


ipt> 
nction() { 


$( "#draggable" ) .draggable(); 


ript> 
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上 述 代 码 第 3 行使 用 插件 初始 化 函数 创建 插件 ， 


[ SEE 
《JJ 辐 加 wwaeecowawp -cx| 人 iau 


x 医 "| 加 DebugBar 多 "| 已 | 辑 -| 4 


具体 效果 如 图 14.1 和 图 14.2 所 示 。 


Enable draggable functionality on any DOM 
element. Move the draggable object by clicking 
on it with the mouse and dragging it anywhere 

within the viewport. 


Enable drat )ow 
element. M | cticking 
onit witht -ywhere 
within the viewport. 


图 14.1 基本 拖 动 应 用 图 14.2 基本 拖 动 应 用 拖 动 后 效果 


2 拖 动 事件 的 处 理 


在 这 个 示例 中 响应 了 插件 的 开始 拖 动 、 拖 动 过 程 、 拖 动 结束 三 个 事件 ， 并 为 事件 的 发 
生 次 数 计数 显示 在 拖 动 元 素 上 。 使 用 了 插件 的 start、drag、stop 来 表示 插件 开始 拖 动 、 拖 
动 中 、 拖 动 结束 三 个 事件 。 并 利用 自 定义 函数 updateCounterStatus ($event_counter, 
new_count) 记录 不 同事 件 发 生 的 次 数 。 


oOoODp 


<script> 
$(function() { 


Var $start counter = $( "#event-start"™ ), 
$drag counter = $( "#event-drag" ), 
$stop counter = $( "#event-stop" ), 
counts = 0 0 0 1 
$( "#draggable" ) .draggable({ 
start: function() { // 拖 动 行为 开始 事件 
counts[ 0 ]++7 
updateCounterStatus ( $start counter，counts[ 0 ] ); 
}, 
drag: function() { // 拖 动 事件 
countsl HH 
updateCounterStatus ( $drag counter, counts[ 1 ] ); 
}， 


stop: function() { // 拖 动 停止 事件 

Counts[ 2 ]+t;? 

updateCounterStatus ( $stop counter, counts[ 2 ] ); 
} 


D); 
function updateCounterStatus ( $event counter, new count ) { 


// 第 一 次 更 新 事件 计数 操作 


“Ns 
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29 
30 


1D); 


if ( !$event counter.hasClass( "ui-state-hover" ) ) { 
Sevent counter.addClass( "ui-state-hover" ) 
-siblings() .removeClass( "ui-state-hover" ); 


} 
// 后 续 事件 计数 操作 


$( "span.count", $event counter ) .text( new count ) 


} 


SI Ascript> 


上 述 代 码 第 3~5 行 分 别 获取 起 始 拖 动 计数 、 拖 动 计数 、 结 束 拖 动 计数 的 显示 对 象 。 
第 6 行 建 立 一 个 数组 来 记录 各 个 事件 发 生 的 次 数 ;第 21 一 29 行 根据 传 入 的 不 同 计数 显示 对 


象 和 计数 值 更 新 显示 。 第 8 一 11 行 响应 开始 拖 动 事 位 


F, 数组 元 素 自 增 并 调用 更 新 显示 函数 。 


第 12 一 15 行 响应 拖 动 事件 ， 数 组 元 素 自 增 并 调用 更 新 显示 函数 。 第 16 一 20 行 响应 结束 拖 
动 事件 ， 数 组 元 素 自 增 并 调用 更 新 显示 函数 。 效 果 如 图 14.3 和 图 14.4 所 示 。 


x 和 "| 加 boot @-| 虽 号 -| 4 


| firedat the start of the drag; drag during the 


Drag me to trigger the chain of 
events. 

star invoked Ox 

‘drag” invoked Ox 


a "stop” invoked Ox 


Layer functionality onto the draggable using the 
start, drag, and stop events. Start is 


drag; and stop when dragging stops. 


图 14.3” 拖 动 事 件 处 理 


3. 容器 内 拖 动 


这 个 示例 使 用 了 插件 的 拖 动 方向 参数 及 拖 动 容器 参数 ， 规 定 拖 动 元 素 只 可 在 某 一 方向 
上 拖 动 ， 或 者 只 可 在 某 一 容器 范围 内 拖 动 。 这 里 使 用 到 了 前 面 介绍 的 axis 坐标 轴 属 性 及 
containment 容器 属性 ， 限 制 了 拖 动 方向 及 拖 动 范围 。 


下 
忆 
3 
4 
6 


8 
a 


<script> 

$(function() { 
$( "#draggable" ) .draggable({ axis: "y" }); // 纵 向 拖 动 限制 
$( "#draggable2" ) .draggable ({ axis: "xn });  // 横 向 拖 动 限制 


]) 7 


// 限 定 拖 动 范围 


已 ] DAWriteBookiQu P ~ OX So 
Xx 部"| 加 Debugear 宴 "| 局 | 国 ~ 


Drag me to trigger the chain of 
events, 
start invoked lx 


二 rdmgr invoked 67x 


Layerful [a "stop” invoked lx | gthe 
» 
fired at the start of the drag; drag during the | 


| start, 
| drag; and stop when dragging stops. 
有 


未 100% ~ | 


图 14.4 ， 拖 动 动作 发 生 后 效果 


$( "#draggable3" ) .draggable ({ containment: "#containment-wrapper", 


scroll: false }); 


$( "#draggable4" ) .draggable({ containment: "#demo-frame™" }); 
$( "#draggable5" ) .draggable({ containment: "parent"” }); 


TOM /sceiote 
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上 述 代 码 第 3 行规 定 拖 动 元 素 只 可 在 纵向 拖 动 . 第 4 行规 定 拖 动 元 素 只 可 在 横向 拖 动 。 
第 6 行规 定 拖 动 元 素 只 可 在 指定 容器 内 拖 动 ， 并 且 不 可 使 用 深 动 条 。 第 7 行规 定 拖 动 元 素 
只 可 在 指定 容器 内 拖 动 ， 但 页 面 上 并 无 此 容器 ， 使 用 深 动 条 。 第 8 行规 定 拖 动 元 素 只 可 在 
父 元 素 中 拖 动 。 效 果 如 图 14.5 和 图 14.6 所 示 。 


ET x = 
| pAWriteBookQu P ~ © x || EjQuery ut Draogabl owiesoodQn P ~ cx| 
x 医 "| 辐 Debugear 仿 "| 已 | 画 ~ | x 蕴 "| 国 pebuggar 信 " | 日 | 加 -| 如 527| 1 


Constrain movement along an axis: 站 Constrain movement along an axis: 


Or to within another DOM element: 


图 14.5 容器 内 拖 动 图 14.6 容器 内 拖 动 后 效果 


4. 延迟 拖 动 
这 个 示例 使 用 了 插件 在 距离 和 时 间 上 的 延迟 拖 动 效果 ， 避 免 出 现 用户 频 繁 单 击 出 现 的 
误 操 作 效果 。 这 里 使 用 了 前 面 介 绍 的 distance 延迟 移动 距离 和 delay 延迟 毫秒 数 属性 。 


二 <script> 
区 $(function() { 


3 $( "#draggable" ) .draggable({ distance: 20 }); 

// 设 定 拖 动 时 鼠标 反应 距离 
4 $( "#draggable2" ) -draggable({ delay: 1000 }); // 设 定 拖 动 延迟 时 间 
2 $( ".ui-draggable" ) .disableSelection(); 
.co 
TU </script> 


上 述 代码 第 3 行 设 定 当 鼠 标 按 下 并 移动 了 20 像素 后 再 发 生 拖 动 操作 。 第 4 行 设 定 当 鼠 标 
按 下 并 移动 1 秒 钟 后 再 发 生 拖 动 操作 。 第 5 行 禁止 样式 选 定 。 效 果 如 图 14.7 和 图 14.8 所 示 。 
5. 捕获 至 元 素 或 者 网 格 


这 个 示例 使 用 了 拖 动 插件 的 捕获 属性 。 这 里 使 用 了 前 面 介绍 的 snap 捕获 属性 和 grid 
网 格 属性 。 

1 <script> 

2 Slfuiunetiomt 

3 

4 


$( "#qdraggable" ) -draggable({ snap: true });  // 拖 动 元 素 捕获 设 定 
$( "#draggable2" ) .draggable({ snap: "-ui-widget-header" }); 
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// 设 定 捕获 拖 动 元 素 对 象 
$("#draggable3" ) .draggable ({ snap: ".ui-widget-header", snapMode: 
voutero // 设 定 捕获 拖 动 元 素 对 象 及 捕获 方式 
6 $( "#draggable4" ) -draggable({ grid: [ 20,20 ] }); 
7 $( "#draggable5" ).draggable({ grid: [ 80, 80 ] }); 
Bo 
9 </script> 


书 DAWriteBookQu P - OX |ijQuery 
Xx 器 "| 辐 DebugBar 令 " | 书 | 国 -| 2 


Only if you drag me by 20 
pixels, the dragging will 
Start 


| Regardless of 
| distance, you have to drag 
and wait for 1000ms 
| before dragging starts 
| Orty Wf you drag me by 20 
Delay the start of dragging for a number of 有 
milliseconds with the de lay option; prevent mill 
dragging until the cursor is held down and dragged a dral tu 
specifed number of pixels with the distance spel ith the distance 
option. opt] 
搞 100% ~ 
图 14.7 延迟 拖 动 图 14.8 延迟 拖 动 后 结果 


上 述 代码 第 3 行 简单 设置 了 拖 动 元 素 可 被 捕获 。 第 4 行 指 定 了 被 拖 动 元 素 被 哪个 元 素 
捕获 。 第 5 行 也 是 指定 了 捕获 元 素 及 捕获 方式 。 第 6、7 行 指定 了 拖 动 元 素 被 捕获 的 网 格 位 
置 。 效 果 如 图 14.9 和 图 14.10 所 示 。 


= 


[eS Brrr Er 


Snap the draggable to the inner or outer boundaries of 3 DOM element. Use the snap, snapMode (inner, outer, 
both), and snapTolerance (distance in pixels the draggable must be from the element when snapping fs 
invoked) options. 


Or snap the draggable to a grid. Set the dimensions of grid cells (height and width in pixels) with the grid option. 


图 14.9 捕获 至 元 素 或 网 格 


ws 
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Snap the draggable to the inner or outer boundaries of a DOM slement. Use the snap, snapMode (inner, outer, 
both), and snapTolerance (distance in pixets the draagable must be from the element when snapping $s 
nvoked) options 


Or snap the draggabie to a grid. Set the dimensions of grid cells (height and width in pixels) with the grid option. 


图 14.10 被 元 素 或 网 格 捕 获 效 果 


. 拖 动 过 程 中 窗口 自动 滚动 


这 个 示例 使 用 了 与 滚动 条 相关 的 三 个 属性 : scroll， 是 否 添加 滚动 条 ，scrollSensitiyity， 
滚动 条 人 敏感 值 ，scrollSpeed， 滚 动 条 的 滚动 速度 。 


出 
区 
3 
4 
和 


6 
史 


<script> 
$ (function() { 
$( "#draggable" ) .draggable({ scroll: true }); 


// 拖 动 中 父 容器 可 自动 产生 滚动 条 
$( "#draggable2" ) .draggable ({ scroll: true, scrollSensitivity: 
OON DS // 滚 动 条 的 敏感 值 
$( "#draggable3" ) .draggable({ scroll: true, scrollSpeed: 100 }); 

// 滚 动 条 的 滚动 速度 


]) 7 
</script> 


上 述 代码 第 3 行 设 定 了 窗口 可 随 拖 动 操作 自动 滚动 。 第 4 行 设 定 了 窗口 自动 滚动 的 敏 


感 距离 。 第 5 行 设 定 了 自动 滚动 速度 。 效 果 如 图 14.11 和 图 14.12 所 示 。 


站 DAwriteBoolwiQu 人 -CX 有 大 jQuery ul a 
x 问 -| 同 DebugBar 舍 - | 日 | 国 -| 2 -| 32-| 1 


吾 [ 了] scrollspeed set to 100 


Seroll sat to nae, 
司 DAWriteBookjQu P ~ SX || E jQuery ut Draggabl.. Se 
上 Ex 条 "| 四 Debugsar 售 " | 日 | 加 "| 2 -| si | io 
2 习 | 
Seroll set to true, seroltsensitivity set to | | serolspeed set to 100 | 
default sacting: | 和 况 | 
Automatically scroll the > dragsable fs 
moved beyond the view 11 option to true 
to enable auto-scrolling, nscrolling fs 
triggered and its speed Worme surorrsensitivity 
and scrollSpeed options. 日 
1l00% ~ | 页 100% > || 
图 14.11 自动 滚动 窗口 图 14.12 ” 拖 动 引发 窗口 自动 滚动 
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7. 恢复 原始 位 置 


这 个 示例 使 用 了 插件 的 恢复 位 置 属性 。 这 里 使 用 了 插件 的 revert 恢复 原始 位 置 属 性 。 


<script> 


$( "#draggable"” ) .draggable({ revert: true }); // 拖 动 后 返回 原始 位 置 
$( "#draggable2" ) .draggable({ revert: true, helper: "clone™ }); 


* 
2 S$(function() { 
3 
4 


5 
6 </acript> 


// 拖 动 后 产生 克隆 元 素 


上 述 代码 第 3 行 简单 设置 了 拖 动 元 素 的 恢复 原始 位 置 属性 。 第 4 行 设 定 了 拖 动 元 素 在 
被 拖 动 时 ， 插 件 工具 自动 在 原 位 置 创建 的 到 隆 体 ， 并 恢复 原始 位 置 。 这 个 例子 的 效果 是 ， 
拖 动 元 素 还 可 拖 动 ,但 当 我 们 将 鼠标 键 抬 起 时 , 元 素 又 恢复 到 了 初始 位 置 .效果 如 图 14.13 一 


图 14.15 所 示 。 


cm =)e lb. 


Cj) owneeocowavp -cx 


[种 -| 加 bebober 今 -| 口 | 加 


Revert the original Revert the helper 


Return the draggable (or it's helper) to its 
original location when dragging stops with 
中 “the boolean revert option. 


图 14.13 ”恢复 原始 位 置 


8. 可 视 化 反馈 


这 个 示例 使 用 了 插件 的 工具 设 定 ， 使 用 插件 工 
具 在 拖 动 时 实现 了 不 同 效果 ， 另 外 还 使 用 了 拖 动 元 
素 的 堆栈 。 这 里 使 用 了 插件 的 opacity 透明 度 属性 ， 
以 及 当 拖 动 过 程 中 设置 鼠标 样式 的 属性 cursor 和 和 鼠 
标 相 对 于 拖 动 元 素 的 位 移 cursorAt 属性 。 使 用 stack 
堆栈 属性 设 定 了 在 同一 个 栈 中 的 不 同 拖 动 元 素 当 被 
拖 动产 生 覆 盖 效果 时 ， 最 后 一 次 拖 动 的 元 素 在 其 他 
元 素 的 上 层 ， 并 覆盖 了 其 他 被 拖 动 的 元 素 。 

TD 


$ (function() { 


.324 


2 | 
人 司 poswritegoowiau P -上 x| 剧 
Xx 医 "| 四 Debugbar 全-| 中 | 国 | 
Revert the helper 
Retur pover he original |its helper) to its 
origin Tagging stops with 
theb Stion. 
夸 100% ~ 


ex 
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图 14.15 恢复 原始 位 置 拖 动 过 程 二 
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$( "#draggable" ) .draggable({ helper: "original™ }); 
$( "#draggable2" ) .draggable({ opacity: 0.7, helper: "clone™ }); 
$( "#draggable3" ) .draggable({ 


cursor: "move"， // 鼠 标 样 式 
cursorAt: { top: -12, left: -20 }, // 鼠 标 位 置 
helper: function( event ) { // 对 拖 动 元 素 产 生 新 内 容 


return $( "<div class='ui-widget-header'>I'm a custom helper 


</div>™ 7 
} 
]) 7 


$( "#set div" ) .draggable({ stack: "#set div" }); 


1D); 


14 </script> 


上 述 代码 第 3 行使 用 插件 原始 工具 功能 。 第 4 行 设 定 当 拖 动 元 素 时 , 元 素 透 明度 改变 ， 
并 使 用 克隆 工具 克隆 元 素 在 原 有 位 置 。 第 6 行 设 定 拖 动 时 光标 样式 。 第 7 行 设 定 拖 动 时 光 
标 位 置 。 第 8、9 行 重 写 了 工具 的 实现 功能 ， 用 一 个 新 添加 的 层 表示 拖 动 效果 。 第 12 行使 
用 拖 动 元 素 堆栈 ， 效 果 如 图 14.16 一 图 14.18 所 示 。 
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Provide feedback to users as they drag an object in the form 
of 3 helper. The helper option accepts the values 
‘original (the draggable object moves with the curso), 
‘clono’ (a duplicato of tho draggablo moves with tho cursor), 
or a function that returns a DOM element (that element 5 
shown near the cursor during drag). Control the helper's 
transparency with the opaci ty ootion. 


With helpers: 


Semiansparent | | Cae 


二 sptm Sem-varsparent cone 


of a halper. The helper option acceptst cr 
originat (the draggabla object moves with | 

clone (a duplicate of the draggable moves 

or a function that roturns 3 DOM alement 人 

shown near the cursor during drag). Control me netpers 
transoarency with the opacity ootion. 


| 
| 
Provide feedbsck to users as they drag an dl | 


lo 


本 100% 


图 14.16 ”可视化 反馈 


9.， 光标 样式 
这 个 示例 使 用 了 插件 对 光标 设置 的 相关 属性 。 这 里 使 用 了 和 上 一 个 例子 相同 的 关于 光 


标 样 式 设 定 的 两 个 属性 cursor 和 cursorAt。 


和 
2 
3 


<script> 
$(function() { 


图 14.17 可 视 化 反馈 透明 度 0.7 效果 


$( "#draggable" ) .draggable({ cursorAt: { cursor: "move", top: 56, 


Loft Seo) Fs 


$("#draggable2" ) .draggable ({ cursorAt: { cursor: "crosshair", top: 


dette = 


$( "#draggable3" ) .draggable({ cursorAt: { bottom: 0 } }); 
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So 
TY </script> 


Provide feedback to users as they drag an o 
of a helper. The helper option accepts t| 
originaf (the draggable object moves with | 
‘clone’ (a duplicate of the draggable moves 
or a function that returns a DOM element ( 
shown near the cursor during drag). ob pe 


图 14.18 ”可视化 反馈 重 写 工具 实现 


上 述 代 码 第 3 行 设 定 了 光标 位 置 ， 光 标 样式 为 移动 样式 。 第 4 行 设 定 了 光标 位 置 ， 光 标 
样式 为 十 字样 式 。 第 5 行 设 定 了 光标 位 置 在 拖 动 元 素 底 端 。 效 果 如 图 14.19 一 图 14.21 所 示 。 


Es ET 


下 


[oweeso P- cx 


[x en i 


EEC 


问 - | 四 Debugbar 叫 -| 已 | 加 下 2 -| 355] 


Ta always stick to My cursor position 下 
he center (relative only controlled for 
to the mouse) 


1witLatways stick to | | My cursor at eft -5 
nd top 5 
the bottom value 


he center (relatve 
to the mouse) 
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cursorAt option to specify an oo com er ve to the 
draggable (specify a pixel vatuef 

and/or left). Customize the cursc 

the cursor option with a vatid 


move, pointer, crosshair, etc. 


Position the cursor while dragging the object. By default the cursor 
appears in the center of the draeeed obiect: use the cursorAt 
option to specify another locatig Wy crsor sat ete .s |aggable (specify 
a pixel value from the top, right and top -5 hi. 

the cursors appearance by suppl 

valid css cursor value: default, | 


图 14.19 ”光标 样式 一 14.20 ”光标 样式 二 


10. 拖 入 有 序 表格 


这 个 示例 使 用 了 排序 列表 插件 ， 将 拖 动 元 素 拖 入 排序 列表 中 。 这 里 使 用 了 可 排序 列表 
插件 sortable， 并 设 定 了 表 中 元 素 定位 属性 revert。 在 拖 动 插件 中 使 用 了 connectToSortable 
属性 与 排序 表格 关联 。 
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Position the cursor while dragging the object. By default the 
cursor appears in the center of th jse the 
CursorAt option to specify an [recent jive to the 
draggable (specify a pixel value f| to te mouse) lbottom, 
and/or left). Customize the curso upplying the 
cursor option with a valid css Mt, move, 
pointer, crosshair, etc. 


图 14.21 光标 样式 三 


<script> 
$(function() { 
$( "#sortable" ) .sortable({ 
revert: true 
Ts 
$( "#draggable" ) .draggable({ 
connectToSortable: "#sortable", // 将 拖 动 元 素 与 表格 关联 
helper: "clone", 
revert: "invalid" 
1 
$( "ul, li" ).disableSelection(); 
]) 7 
</script> 


上 述 代 码 第 4 行 设 定 排序 表格 行 顺序 发 生变 化 时 元 素 定位 在 新 的 位 置 。 第 7 行将 拖 动 
插件 与 排序 表格 关联 起 来 。 第 8 行 设 定 当 拖 动 元 素 时 克隆 一 个 新 的 元 素 。 第 9 行 不 允许 元 


原始 位 置 。 效 果 如 图 14.22 和 图 14.23 所 示 。 
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图 14.22 拖 入 有 序 表格 一 图 14.23 拖 入 有 序 表格 二 
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14.2 jQuery UI 投 放 插 件 


下 面 介 绍 jQuery UI 提供 的 另 一 种 投放 插件 dropable。 这 种 插件 可 以 与 上 一 节 讲 的 拖 动 
插件 搭配 使 用 ， 不 同 的 是 这 种 插件 可 以 接受 拖 动 插件 元 素 。 


14.2.1 jQuery UI 投放 插件 基本 介绍 


下 面 来 看 一 下 jQuery UI 投放 插件 的 基本 属性 ， 如 表 14.4 所 示 。 


属 性 
disable 
accept 
activeClass 
addClasses 
hoverClass 
greedy 
scope 
tolerance 


表 14.4 ”投放 插件 属性 说 明 


类 型 默 认 值 说 明 
布尔 false 是 否 使 用 投放 插件 
选择 器 ， 函 数 | * 所 有 的 匹配 选择 器 的 拖 动 对 象 都 会 被 接受 
字符 串 false 投放 元 素 的 激活 样式 
布尔 true 是 否 添加 ui-droppable 样式 
字符 串 false 当 拖 动 元 素 悬 停 在 投放 元 素 上 时 的 样式 类 
布尔 false 是 否 阻 止 嵌 套 的 投放 元 素 事件 传递 到 上 层 元 素 
字符 串 "default' 投放 元 素 分 组 范围 
字符 串 ‘intersect' 指定 当 拖 动 元 素 获 盖 在 投放 元 素 上 时 ， 投 放 元 素 的 样式 


该 插件 还 具有 一 些 投放 事件 和 方法 ， 如 表 14.5 和 表 14.6 所 示 。 


表 14.5 投放 插件 事件 说 明 


让 砚 一 机 

create 投放 控件 创建 事件 

aa 投下 元 天 活 人 

deactivate 投放 元 素 停 止 移动 事件 

Over dropover 拖 动 元 素 悬 停 在 投放 元 素 上 事件 
out dropout 拖 动 元 素 离开 投放 元 素 事件 

drop drop 拖 动 元 素 被 拖 动 到 投放 元 素 上 事件 


表 14.6 投放 插件 方法 说 明 


方 ， 法 使 用 方式 说 了 明 
destroy() .droppable( "destroy" ) 移 除 插件 所 有 功能 
disable() .droppable( "disable" ) 禁用 插件 

enableO .droppable( "enable" ) 启用 插件 

option() .droppable( "option" , optionName , [value] ) 设 定 插 件 选项 
we0 到 括 件 组 人 


14.2.2 jQuery UI 投放 插件 示例 


1. 默认 功能 


这 个 示例 使 用 了 投放 的 默认 属性 功能 。 这 里 还 使 用 了 插件 的 投放 事件 drop， 并 在 投放 
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事件 中 修改 投放 插件 的 样式 及 文字 内 容 。 


1 <script> 


2 


$ (function() { 


$( "#draggable" ) .draggable(); 


$( "#droppable" ) .droppable({ 


drop: function( event, ui ) { // 投 放 事 件 


$( this ) 


-addClass( "ui-state-highlight" ) 


.find( "p" ) 


-html( "Dropped!™ ); 


} 
| 


1i3" </script> 


上 述 代 码 第 3 行 初始 化 一 个 拖 动 插件 。 第 4 行 初始 化 一 个 投放 插件 。 第 5 一 10 行 响应 
投放 插件 的 投放 事件 ， 在 事件 中 修改 样式 及 文本 。 效 果 如 图 14.24 和 图 14.25 所 示 。 
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图 


14.24 基本 投放 插件 使 用 


2. 接受 拖 动 元 素 测试 


这 个 示 侦 


元 素 。 这 里 使 


图 14.25 ”投放 插件 投放 效果 


中 使 用 了 两 个 拖 动 元 素 、 一 个 投放 元 素 。 在 投放 元 素 中 只 接受 其 中 一 个 拖 动 
和 了 投放 元 素 的 accept 属性 指定 可 接受 的 拖 动 元 素 对 象 , 并 使 用 了 activeClass 


属性 设 定 当 投放 元 素 被 激活 时 的 样式 。 使 用 hoverClass 属性 设 定 当 有 元 素 覆 盖 到 投放 元 素 
上 时 的 样式 ， 同 时 也 使 用 了 投放 事件 drop 修改 投放 元 素 样式 及 文本 。 


出 
弛 
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4 
5 
6 
了 
8 


<script> 
$(function() { 


$( "#draggable, #draggable-nonvalid" ) .draggable(); 


$( "#droppable" ) .droppable({ 
accept: "#draggable", 


// 接 受 元 素 指 定 


activeClass: "ui-state-hover", // 被 激活 时 样式 
hoverClass: "ui-state-active", // 有 其 他 元 素 悬 停 其 上 时 的 样式 


drop: function( event, ui 


本， 


"Ms 
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9 $( this ) 

10 -addClass( "ui-state-highlight" ) 
a -Fundt mp 

2 :html( "Dropped!”) > 

在 汉 } 

14 Ds; 

To Fs 


16 </script> 


上 述 代 码 第 3 行 创建 了 两 个 拖 放 元 素 。 第 5 行 设 定 了 投放 元 素 可 以 接受 的 拖 动 元 素 。 
第 6 行 设 定投 放 元 素 激活 样式 。 第 7 行 设 定 当 可 接受 的 拖 动 元 素 悬 停 在 投放 元 素 上 时 的 样 
式 。 第 8 一 13 行 响应 投放 插件 的 投放 事件 ， 在 事件 中 修改 样式 及 文本 。 效 果 如 图 14.26 一 
图 14.28 所 示 。 


EGGaopwweeouio p- ox| Soev ui oroosnr. “| 
X 蔓 "| 加 Debugear 仿 - | 书 | 加 "| 如 -| 23r| mx -| 


TIE 


SI Er yr En 


x 吉 "| 辐 Debugsor 全"| 加 | 名"| Z| 33r[ 0 | 


mowneve || 
tc 


Dag me to my target | | accepE ‘draggzble! Dag metomy arget | | accept: Wdraggable’ 


| 


Tm eraggable but 
ant be dropped 


BR 


| 


Specify using the accept option which element (or group of elements) is 
accepted by the target droppable. 


Specify using the accept option which element (or group of elements) is 
accepted by the target droppable. 


图 14.26 选择 拖 动 元 素 图 14.27 不 被 接受 的 拖 动 元 素 


已] DAWriteBookQu 万 ~ © XE jQuery ui Droppabl.. x 网 
x 够 -| 加 Debugeer 仿 - | 四 | 苞 -| 之 -| 35-| io | 


tim eragsabte but accept uaggable 
| a 
Drag me to my target 
BR 


Specify using the accept option which element (or group of elements) is 
accepted by the target droppable. 


导 100% > 


图 14.28 被 接受 的 拖 动 元 素 


3. 限定 事件 传递 
这 个 示例 使 用 了 两 组 投放 元 素 、 一 个 拖 动 元 素 ， 一 组 不 限定 事件 传递 ， 另 一 组 限定 事 
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件 传递 。 当 在 drop 事件 中 设 定 返 回 值 为 false 时 ， 上 层 ( 小 ) 的 投放 元 素 的 投放 事件 会 传 


递 到 下 层 〈 大 ) 的 投放 元 素 中 ， 如 果 不 设 定 返回 值 为 false， 则 下 层 〈 大 ) 投放 元 素 不 会 产 
生 投 放 事 件 。 

1 <script> 

2 $(function() { 

1 $( "#draggable" ).draggable(); 

4 $( "#droppable, #droppable-inner" ).droppable({ 

号 activeClass: "ui-state-hover", 

6 hoverClass: "ui-state-active", 

学 drop: function( event, ui ) { 

8 $( this ) 

9 -addClass( "ui-state-highlight" ) 

10 >indt TS 

2 -html( "Dropped!™" ); 

2 return false; 

.3 1 

14 i 

| $( "#droppable2, #droppable2-inner" ) .droppable({ 

16 greedy: true, 

17 activeClass: "ui-state-hover", 

18 hoverClass: "ui-state-active", 

19 drop: function( event, ui ) { 

20 $( this ) 

i .addClass( "ui-state-highlight" ) 

22 ET 

23 -html ( "Dropped!™ ); 

24 下 

25 Ws 

26 1}); 


ST /SCrinE> 


上 述 代 码 第 16 行 组 织 了 事件 传递 效果 。 其 他 代码 和 前 面 的 例子 类 似 。 效 果 如 图 14.29 一 
图 14.31 所 示 。 


Inner droppable (not greedy) inner droppable (greedy) 


When working with nested droppables — for example, you may have an editable directory structure displayed 
a5 a tree, with folder and document nodes — the greedy option set to true prevents event propagation 
when a draggable is dropped on a child node (droppable). 


需 100% ~ 


图 14.29 ”限定 事件 传递 
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When working with nested droppables — for example, you may have an editable directory structure displayed 
a5 a tree, with folder and document nodes — the greedy option set to true prevents event propagation 
when a draggable is dropped on a child node (droppable). 


咏 100% ~ 


图 14.30 未 阻止 事件 传递 


Dropped! Outer droppable 


nner droppable (not greedy) De 


When working with nested droppables — for example, you may have an editable directory structure displayed 
as a tree, with folder and document nodes — the greedy option set to true prevents event propagation 
when a draggable is dropped on a child node (droppable). 


图 14.31 阻止 了 事件 传递 
4. 购物 车 效果 


这 个 示例 使 用 了 折合 插件 、 拖 动 插件 、 投 放 插件 和 排序 表格 插件 ， 实 现 拖 放 操作 购物 
车 效果 。 


1 <script> 

2 $(function() { 

1 $( "#catalog" ) .accordion(); 

a $( "#catalog li" ) .draggable({ 

5 appendTo: "body", // 拖 动 元 素 添加 到 哪 一 个 元 素 中 

6 helper: "clone" // 设 定 克隆 行为 

六 D); 

8 $( "#cart ol" ).droppable({ 

9 activeClass: "ui-state-default", 

10 hoverClass: "ui-state-hover", 

3 二 accept: ":not(.ui-sortable-helper)"， // 接 受 元 素 时 样式 
12 drop: function( event, ui ) { 

LE $( this ) .find( ".placeholder" ) .remove() : 

14 $( "<1i></1i>" ) .text( ui.draggable.text() ) .appendTo( this ); 
nt } 
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16 1) -sortable({ // 可 排序 表格 
hy items: "li:not(.placeholder)", // 表 格 

18 sort: function() { 

19 $( this ) .removeClass( "ui-state-default" ); 
20 } 

21 上 

22 })s 


223 </script> 


上 述 代码 第 3 行 对 ID 为 catalog 的 层 创建 折 谷 元 素 。 第 4 一 7 行 创建 了 多 个 拖 动 元 素 ， 
这 些 元 素 添加 到 body 中 ， 每 个 元 素 在 拖 动 时 都 被 克隆 。 第 8 一 15 行 创建 投放 元 素 。 第 9 
行 设 定投 放 元 素 激活 样式 。 第 10 行 设 定 当 可 接受 的 拖 动 元 素 悬 停 在 投放 元 素 上 时 的 样式 。 
第 11 行 设 定投 放 元 素 可 接受 的 拖 动 元 素 为 去 除了 样式 为 .ui-sortable-helper 的 元 素 。 第 13 
行 删除 投放 元 素 中 的 提示 内 容 。 

第 14 行 向 投放 元 素 中 加 入 一 个 列表 项 ， 列 表 项 的 文本 是 鼠标 所 拖 动 的 元 素 的 文本 。 
第 16 一 23 行 在 投放 元 素 的 基础 上 初始 化 一 个 排序 列表 。 第 17 行 指定 排序 元 素 除 了 投放 元 
素 中 提示 信息 以 外 的 所 有 列表 项 。 第 18 行 设 定 排序 功能 函数 。 第 19 行 删除 样式 类 
ui-state-default。 效 果 如 图 14.32 所 示 。 
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Domonstrate how to use an accordion to structure products into a catalog and make use drag and drop for adding them to a 
shopping cart, where they are sortable. 8 
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图 14.32 ”购物 车 效果 


14.3 小 结 


网 页 元 素 拖 放 效果 是 现代 网 页 中 常用 到 的 一 种 效果 。 本 章 主 要 介绍 了 jQuery 拖 动 插件 
的 基础 知识 ， 以 及 如 何 利用 拖 动 插件 。 重 点 内 容 是 如 何 利用 拖 动 插件 ， 难 点 是 拖 动 插件 的 
配合 使 用 。 下 一 章 将 介绍 jQuery 自 定义 插件 。 


144 习 题 


【习题 1】 练 习 jQuery UI 中 的 拖 动 插件 使 用 方法 。 
【习题 2】 练习 jQuery UI 中 的 投放 插件 使 用 方法 。 
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前 面 的 章节 除了 讲解 如 何 用 jQuery 实现 特效 ， 还 讲解 了 很 多 jQuery 插件 。jQuery 插 
件 是 代码 重用 的 一 个 很 好 的 体现 。 那么 如 何 开 发 jQuery 插件 ? 开发 插件 过 程 中 需要 用 到 哪 
些 知识 ? 需要 注意 什么 ? 这 正 是 本 章 要 讲解 的 主要 内 容 。 


15.1 jQuery 插件 开发 基础 


本 节 介 绍 在 jQuery 开发 过 程 中 需要 用 到 哪些 基础 知识 ， 插 件 与 函数 之 间 的 区 别 是 什么 。 
15.1.1 jQuery 插件 介绍 


jQuery 插件 总 体 来 说 是 对 jQuery 框架 的 功能 补充 ， 有 着 相对 独立 的 功能 ， 并 且 自 成 体 
系 。 它 有 着 独立 的 文件 和 方法 ， 通 过 接口 进行 调用 。 这 里 所 说 的 接口 就 是 前 面 在 介绍 插件 
时 使 用 的 初始 化 函数 及 其 他 功能 函数 。 更 形象 地 说 ，jQuery 插件 是 提供 各 种 各 样 功能 扩展 
的 jQuery 模块 ， 类 似 于 计算 机 的 各 种 功能 扩展 卡 。 


1， jQuery 插件 分 类 


这 里 所 说 的 分 类 不 是 指 功能 分 类 ， 而 是 在 开发 jQuery 插件 的 过 程 中 ， 开 发 形式 上 的 
分 类 。 

口 封装 对 象 方法 的 插件 ， 这 种 插件 也 叫 对 象 级 别 插件 ， 它 主要 为 对 象 添 加 方法 ， 并 
将 这 些 方法 封装 到 对 象 中 。 

口 封装 全 局 函数 的 插件 : 这 种 插件 也 叫 类 级 别 插件 ， 类 级 别 插件 的 开发 最 直接 的 理 
解 就 是 给 jQuery 类 添加 类 方法 ， 可 以 理解 为 添加 静态 方法 。 典 型 的 示例 就 是 
$.AJAX0O 这 个 函数 ， 将 函数 定义 于 jQuery 的 命名 空间 中 。 

口 扩展 选择 器 插件 ， 这 种 插件 是 在 原 有 jQuery 选择 器 的 基础 上 对 特定 对 象 扩 展 使 用 
特殊 选择 器 。 例 如 ，MoreSelectors For Jquery 就 是 一 个 典型 的 jQuery 选择 器 扩展 。 


2. jQuery 插件 与 jQuery 固有 函数 的 区 别 


jQuery 固有 函数 是 jQuery 框架 内 置 的 函数 ， 不 需要 添加 额外 文件 引用 。 而 jQuery 插 
件 则 是 在 jQuery 框架 基础 上 建立 起 来 的 功能 模块 。 在 插件 内 同样 需要 使 用 jQuery 内 置 函 
数 。 插 件 是 需要 jQuery 固有 工具 函数 支持 的 。 
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15.1.2 jQuery 插件 开发 基础 知识 


开发 jQuery 插件 需要 掌握 如 下 知识 点 。 

(1) HTML/XHTML， 这 个 不 用 多 说 ， 我 们 的 jQuery 的 所 有 实现 效果 最 后 都 要 通过 标 
记 来 实现 。 

(2) CSS， 在 前 面 使 用 插件 的 过 程 中 我 们 发 现 ， 很 多 插件 除了 有 自己 的 功能 代码 文件 
外 ， 还 有 配套 的 CSS 文件 ， 这 些 文件 主要 在 插件 动态 改变 元 素 样 式 时 使 用 。 

(3) JavaScript，jQuery 框架 本 身 就 是 由 JavaScript 编写 的 ， 我 们 在 使 用 jQuery 时 也 是 
通过 JavaScript 语言 来 操作 的 。 

jQuery 框架 中 需要 注意 的 内 容 如 下 。 

(1) 选择 器 ，$ 是 jQuery 的 简写 形式 。 所 以 ,jQuery0 和 $0 的 意思 是 一 样 的 。 所 有 用 $0 
的 地 方 ，$ 都 可 以 用 jQuery 代替 。 

(2) 插件 类 型 声明 ， 用 jQuery.extend 增加 的 函数 ， 或 者 说 扩展 的 函数 ， 可 以 理解 成 添 
加 类 方法 ， 用 类 名 调用 ; 用 jQuery.fn.extend 增加 的 函数 ， 或 者 说 扩展 的 函数 ， 可 以 理解 成 
添加 对 象 方法 ， 即 添加 成 员 函 数 ， 用 对 象 名 调用 。 

(3) 对 象 原型 ，jQuery.fn=jQuery.prototype， 所 以 ，jQuery. 包 是 jQuery.prototype 的 
别名 。 

(4) 内 置 工具 函数 。 


15.1.3 创建 一 个 简单 jQuery 插件 


下 面 通 过 一 个 示例 来 初步 认识 一 下 jQuery 插件 开发 过 程 。 这 个 示例 是 封装 对 象 方法 的 
插件 示例 。 

首先 ， 声 明 插件 ， 定 义 一 个 新 的 函数 原型 到 jQuery. 名 对 象 中 ,函数 原型 的 名 字 就 是 插 
件 的 名 字 : 

jQuery.fn.myPlugin = function() { 

// 添 加 插件 成 员 

] 

在 上 面 的 代码 中 定义 了 一 个 名 为 myPlugin 的 插件 。 上 面 的 写法 还 是 有 些 问 题 ， 因 为 如 
果 像 上 面 那样 写 ， 可 能 会 导致 与 其 他 jQuery 库 冲 突 。 为 了 解决 这 个 问题 ， 可 以 将 上 面 的 写 
法 修改 为 : 

(function( $ ){ 


$.fn.myPlugin = function() { 


// 添加 插件 成 员 


}s; 
1}) ( jQuery ); 

上 面 这 种 写法 叫 封闭 或 者 闭 包 ， 在 封闭 的 函数 内 部 可 以 使 用 jQuery 特有 的 $ 符 ， 而 不 
现任 何 问题 。 还 有 一 点 要 说 明 的 就 是 在 插件 内 部 代码 中 出 现 的 this 关键 字 ， 它 代表 调 


EF 


二 
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用 当前 编写 的 插件 的 jQuery 对 象 ， 因 此 我 们 不 用 再 次 在 插件 内 包装 this 关键 字 。 
1. this 关 键 字 的 使 用 
下 面 通过 示例 代码 来 使 用 this 关键 字 。 


1 (function( $ ){ 

2 $.fn.myPlugin = function() { 

// 在 代码 中 不 需要 写 $ (this) ， 因 为 this 本 身 就 代表 DOM 元 素 对 象 
this.fadeIn('normal', function(){ 


// 功能 代码 
]) 7 
}; 
}) ( jQuery ); 
调用 插件 代码 可 以 这 样 写 : 
$('#element') .myPlugin(); 


下 面 补充 代码 : 


am w 


1(function( $ ){ 

2 $.fn.maxHeight = function() { 

3 var max = 0; 

4 this.each(function() { 

max = Math.max( max，S$(this) .height() ); 
6 ]}) 7 

渴 return max; 

Bo 

9}) ( jQuery ); 


这 个 插件 完成 的 功能 很 简单 ， 实 现 对 所 有 匹配 元 素 的 高 度 取 最 大 值 。 可 以 使 用 一 个 
HTML 文件 来 进行 插件 测试 。 首 先 ， 在 页 面 建立 4 个 <DIV>， 分 别 设置 不 同 内 容 : 


1 <div id="divl">jQuery<br />jQuery</div> 

2 <div id="div2">jQuery<br />jQuery<br />jQuery<br />jQuery</div> 

3 <div id="div3">jQuery<br />jQuery<br />jQuery<br />jQuery<br />jQuery<br /> 
jQuery</div> 

4 <div id="div4">jQuery<br />jQuery<br />jQuery<br />jQuery<br />jQuery<br /> 
jQuery<br />jQuery<br />jQuery</div> 


在 CSS 样式 设 定 中 分 别 对 它们 使 用 不 同 的 背景 颜色 ,代码 参考 光盘 内 容 。 调 用 插件 形 


<script src="jslib/jquery-1.6.js" type="text/javascript"></script> 
<script src="js/MyPlugin.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$ (function(){ 
alert ("各 层 最 大 高 度 为 : "+$ ("div") -maxHeight ()+"px"); 
]}) 7 
</script> 


效果 如 图 15.1 所 示 。 
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2. 插件 中 this 对 象 的 返回 


刚才 编写 的 插件 很 简单 ， 而 且 返 回 的 内 容 也 只 是 一 个 整 型 值 。 但 是 ， 对 于 jQuery 来 说 


它 的 优势 之 一 是 函数 链 , 也 就 是 一 个 对 象 可 以 一 次 性 通过 调用 一 系列 的 函数 完成 某 个 功能 。 
这 需要 jQuery 函数 能 如 实 返回 调用 它 的 对 象 。 因 此 ， 为 了 保证 jQuery 的 链接 特性 ， 我 们 


要 保证 编写 的 插件 能 够 返回 this 对 象 。 下 面 在 原 有 插件 的 基础 上 进行 修改 ， 完 成 返 
对 象 功能 。 
mi Pr a Ee 
装 DAWwiteBooljQverysite\PloginsTesth P ~ OX | 5 | 人 
图 15.1 自 定义 插件 示例 一 
1 (function( $ ){ 
2 $.fn.lockDimensions = function( type ) { 
3 return this.each(function() { 
4 var Sthis = $ (this); 
5 if ( !type || type == 'width' ) { 
6 alert ($this.width()); 
;| . 
8 if ( !type || type == 'height' ) { 
9 alert(Sthis.height() ) 7 
10 
11 1); 


ry 


回 this 


可 以 在 页 面 上 测试 这 个 插件 的 作用 ， 以 及 它 是 否 可 以 完成 可 链接 操作 。 利 用 页 面 元 素 
调用 插件 函数 名 (插件 函数 名 即 我 们 在 插件 中 定义 的 $. 甸 .lockDimensions) ， 并 根据 插件 定 


义 定 义 形式 传 入 参数 。 


<script type="text/javascript"> 
$ (function(){ 


总 
[SEE 


时 

之 

3 $ ("div") .lockDimensions('height"') .css('color’', 
4 

S 


-rec ope 
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HTML 代码 和 CSS 样式 与 上 面 的 例子 相同 ， 只 是 调用 插件 的 方式 有 所 不 同 。 在 插件 代 
码 的 第 3 行 就 是 我 们 所 强调 的 返回 对 象 本 身 ， 也 就 是 将 this 返回 。 只 有 这 样 ， 在 测试 代码 
的 第 3 行 才 可 以 在 调用 插件 函数 结束 后 继续 调用 css0 函 数 设 定 文字 颜色 。 效 果 如 图 15.2 
和 图 15.3 所 示 。 
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图 15.3 ”插件 功能 完成 后 修改 字体 颜色 


3. 以 选项 对 象 代替 零散 参数 

自 定义 插件 还 要 设 定 默 认 值 与 选项 。 对 于 较 复 杂 的 插件 ， 按 照 惯例 不 是 采用 外 部 直接 
传递 零散 参数 形式 ， 而 是 使 用 一 种 可 和 迭代 的 选项 对 象 来 进行 功能 设 定 。 可 以 看 下 面 这 个 插 
件 示例 : 


TtEuneEton St 
2 $.fn.tooltip = function( options ) { 


“3 


3 Var settings = { 

4 "Location'" EOD 

二 "background-color' : "blue' 

6 ] 

return this.each(function() { 

8 if ( options ) { 

9 $.extend( settings, options ); 

10 alert ("当前 传 入 方向 : "+settings["location"]+"; 当前 传 入 背景 色 : "+settings 
["background-color"]); 

于 } 

让 有 else 

J alert ("默认 方向 : "+settings["location"]+"; 默认 背景 色 : "+settings 
["background-color"]); 

14 上 丰 光 

15 1}; 


16}) ( jQuery ); 


上 述 代码 第 3 一 6 行 是 插件 的 默认 选项 设置 。 第 8 行 判 断 调用 插件 时 是 否 传 入 了 选项 
对 象 。 第 9 行将 外 部 传 进来 的 选项 对 象 与 默认 选项 合并 。 
在 调用 这 个 插件 的 时 候 ， 可 以 给 定 参数 ， 例 如 : 


<script type="text/javascript"> 
$ (function(){ 
$('div') .tooltip({ 
'location' = "bottom’ 
"background-color' : "red'" 
Es 
]) 7 
SSCEULBEE> 


效果 如 图 15.4 和 图 15.5 所 示 。 


一 一 一 一 一 一 一 -= — pe 
版 3 DAWrieBookVQuenSiteVpluginsTestf D ~ © XE EE xx | i a ed Pe 
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图 15.4 携带 选项 参数 调用 插件 


"Ds 
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急 :top; se :bue 


图 15.5 默认 选项 参数 调用 插件 


4. 向 插件 中 添加 方法 


前 面 在 介绍 插件 时 曾 提 到 插件 有 一 些 方法 可 用 。 那 么 这 些 方法 是 如 何 定义 在 插件 中 的 
呢 ? 看 下 面 这 个 例子 : 


1 (function( $ ){ 

2 var methods = { 
// 声 明 插件 方法 

3 init : function( options ) {alert("Initial Method"); }, 

4 show : function( ) { alert("Show Method"); je 

5 hide : function( ) { alert("Hide Method"); }, 

6 update : function( content ) { alert("Update Method "+"Content: 
"+content); } 


i 
8 $.fn.tooltip = function( method ) { 
// 定 义 方法 功能 
多 if ( methods [method] ) { 
10 return methods[ method ] .apply( this, Array.prototype.slice.call 
( arguments, 1 )); 
11 } else if ( typeof method === 'object' || ! method ) { 
12 return methods.init.apply( this, arguments ); 
和 13 } else { 
14 $.error( 'Method ' + method + ' does not exist on jQuery.tooltip' ); 
ys | 
Hz 


BM Oery) 

上 述 代 码 第 3~6 行 定义 了 插件 的 初始 化 、 显 示 、 隐 藏 、 更 新 等 方法 ， 并 加 入 了 简单 
实现 。 第 9 行 判断 调用 插件 时 传递 的 方法 名 是 否 有 效 。 第 10 行 调用 与 传 进来 的 方法 名 对 应 
的 方法 执行 。 第 11 行 设 定 如 果 方法 名 为 空 则 为 初始 化 方法 。 第 13 行 表示 如 果 方 法 名 不 为 
空 但 是 不 在 插件 定义 的 方法 范围 内 ， 则 利用 jQuery 的 异常 处 理 抛 出 异常 。 


. 340 . 


第 15 章 插件 开发 


下 面 对 方 法 的 使 用 进行 测试 : 


<script type="text/javascript"> 
$ (function(){ 
Sdivy} -tooltiD (Us 
$('div') -tooltip({ 
F000 .2 Das 
]) 7 
$('div') .tooltip('hide'); 
$('div') .tooltip('update', 'This is the new tooltip content!'); 
s{'div .tooltip("show)s 


]) 7 
</script> 
效果 如 图 15.6 和 图 15.7 所 示 。 
we | 
|[ 国 piwtescoQeyshe PuginsTert P - Ox][G Rr | 


图 15.6 初始 化 方法 调用 
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图 15.7 更 新 方法 调用 
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5. 向 插件 中 加 入 事件 
除了 可 以 在 插件 中 声明 多 个 方法 之 外 ， 还 可 以 对 插件 绑 定 事件 ， 使 插件 能 够 响应 事件 


并 做 相应 处 理 。 

LL (functiont{t $ )t 

2 var methods = { 

| init : function( options ) { 

4 return this.each (function(){ 

5 $ (window) .bind('resize.tooltip', methods.reposition); 

6 ]) 7 

}, 

8 destroy : function( ) { // 声 明 事 件 并 添加 实现 

9 return this.each(function()1{ 

10 $ (window) .unbind(' .tooltip'); 

11 }) 

T2 ]， 

3 reposition : function( ) {alert ("窗口 当前 宽度 : "+$ (window) .width()+"; 
窗口 当前 高 度 : "+$ (window) .height ());}， 

14 show : function( ) {alert("Show Method");}, 

5 hide : function( ) { alert("Hide Method");}, 

16 update : function( content ) {alert("Update Method "+"Content: 
"+content); } 

Eh 

18 $.fn.tooltip = function( method ) { 

19 if ( methods[method] ) { 

20 return methods [method] .apply( this, Array.prototype.slice.call 
( arguments, 1 )); 

il } else if ( typeof method === "object' || ! method ) { 

22 return methods.init.apply( this, arguments ); 

23 } else { 

24 $.error( 'Method ' + method + ' does not exist on jQuery.tooltip' ); 

25 } 

26 7 


27}) ( jQuery ); 

上 述 代 码 第 5 行 在 插件 初始 化 时 绑 定 调整 大 小 事件 到 浏览 器 窗口 ， 并 且 指 定 事件 处 理 
程序 为 函数 reposition0。 第 10 行 在 插件 的 销毁 函数 中 取消 窗口 绑 定 事件 。 

下 面 可 以 测试 插件 事件 : 


和 
因 
3 
4 
5 
6 
| 
8 
| 
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<script type="text/javascript"> 


$ (function(){ 


SRdivi") EooLltio(Ns 
$('#divil') -tooltip({ 
foo = “bar” 
]) 7 
$('#divil') .tooltip('hide'); 
$('#divl') .tooltip('update', "This is the new tooltip content!'); 
SO 人 SO 
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$("#div1') .click(function(){1S('"div') .tooltip('destroy')}) 


10 


h 
12</script> 
效果 如 图 15.8 所 示 。 
「 ETSIS 
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图 15.8 插件 事件 测试 


15.2 插件 示例 


本 节 将 通过 写 一 个 比较 具有 应 用 性 的 插件 来 完整 地 体验 一 下 插件 开发 过 程 。 
所 要 实现 的 功能 是 当 鼠 标 悬 停 到 超 链 接 上 时 ， 可 以 出 现 背 景 颜 色 和 文字 颜色 都 不 同 的 提示 
信息 。 这 里 暂且 管 它 叫 彩 色 工具 提示 插件 。 

1. 插件 原理 及 显示 风格 设 定 

这 个 插件 的 原理 是 利用 HTML 标记 中 添加 的 title 属性, 将 其 转换 至 页 面 上 , 并 形成 一 

有 E 面 共有 6 种 颜色 可 选 ， 当 然 ， 也 可 以 根据 个 人 需要 添加 更 多 种 颜色 


系列 的 工具 提示 。 它 里 
选择 。 这 个 插件 也 是 一 种 比较 新 颖 的 用 户 体验 。 
当 在 源 文件 中 出 现 这 样 一 行 HIML 代码 时 


它 的 转换 机 制 如 下 
<a href="index.html" title=" 转 到 首页 "> 首页 </a> 
使 用 jQuery 插件 转换 后 页 面 应 该 是 下 面 的 样子 
-60pxz"> 回 到 首页 </span> 


<a _ class="blue colorTipContainer" href="index"> 首 页 
style="margin-left: 7 


class="blue" 


<span class="colorTip" 
<span class="pointyTipShadow"></span> 


<span class="pointyTip"></span> 


</span> 
</a> 


这 个 插件 
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息 注 ， 上 述 代码 中 的 blue 样式 类 名 是 为 了 履 盖 默认 的 提示 信息 的 背景 色 。 


为 了 能 够 让 工具 提示 在 正确 的 位 置 显示 , 并 且 显 示 样 式 正 常 , 需要 定制 CSS 样式 文件 ， 
这 个 文件 是 和 插件 搭配 使 用 的 : 


1 .colorTipContainert{ 
2 position:relative; 
3 text-decoration:none !important; 
A 

5 .colorTipt{ 
6 /* 彩色 工具 提示 样式 类 */ 

7 display:none; 

8 position:absolute; 

9 left:50%; 

10" Eop:=30pz» 

11 padding:6px; 

12 background-color:white; 

13 font-family:Arial,Helvetica,sans-serif; 
14 font-size:1lpx; 

15 font-style:normal; 

16 line-height:1; 

17 text-decoration:none; 

18 text-align:center; 

19 text-shadow:0 0 lpx white; 

20 white-space:nowrap; 

21 -moz-border-radius:4px; 

22 -webkit-border-radius:4px; 

23 border-radius:4px; 

24 } 

25 .pointyTip, .pointyTipShadow{ 

26 /* 彩色 提示 信息 下 端的 三 角形 样式 */ 

27 border:6px solid transparent; 

28 bottom:-12px; 

29 height:0; 

30 left:50%; 

31 margin-left:-6px; 

32 position:absolute; 

33 width:0; 

Sa 

35 .pointyTipShadow{ 

36 /* 边框 阴影 样式 */ 

37 border-width:7px; 

38 bottom:—-14px; 

39 margin-left:-7px; 

40 } 


上 述 代 码 中 .colorTipContainer 样式 类 是 彩色 工具 提示 的 容器 元 素 样式 类 。 为 了 创建 不 
同 颜色 的 工具 提示 信息 ， 还 需要 在 CSS 文件 中 加 入 这 个 插件 的 相关 主题 。 目 前 ， 我 们 给 出 
了 6 个 主题 ， 读 者 可 以 根据 自己 的 需要 ， 按 照 主题 格式 创建 自己 的 主题 风格 。 

/* 6 种 主题 样式 */ 


-white .pointyTip{ border-top-color:white;} 
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-white .pointyTipShadow{ border-top-color:#ddd;} 
-White .colorTipt{ 

background-color:white; 

border:1px solid #DDDDDD; 

Color:#555555; 


-yellow .pointyTip{ border-top-color:#f9f2ba;} 
.yellow .pointyTipShadow{ border-top-color:#e9d315;} 
.yellow .colorTipt{ 

background-color:#f9f2ba; 

border:1lpx solid #e9d315; 

color:#5b5316; 


.blue .pointyTip{ border-top-color:#d9f1lfb;} 
.blue .pointyTipShadow{ border-top-color:#7fcdee;} 
.blue .colorTipt{ 

background-color:#d9f1fb; 

border:1lpx solid #7fcdee; 

color:#1b475a; 


.green .pointyTip{ border-top-color:#f2fdf1;} 
.green .pointyTipShadow{ border-top-color:#b6e184;} 
.green .colorTipt{ 

background-color:#f2fdf1; 

border:1lpx solid #b6e184; 

color:#558221; 


.red .pointyTip{ border-top-color:#bb3bld;} 
.red .pointyTipShadow{ border-top-color:#8f2a0f;} 
.red .colorTip{ 

background-color:#bb3bld; 

border:1lpx solid #8f2a0f; 

color:#fcfcfc; 

text-shadow:none; 


.black .pointyTip{ border-top-color:#333;} 
.black .pointyTipShadow{ border-top-color:#111;} 
.black .colorTipt{ 

background-color:#333; 

border:lpx solid #111; 

Color:#fcfcfc; 

text-shadow:none; 


至 此 ， 显 示 样式 的 准备 工作 基本 完成 了 。 下 面 就 可 以 着 手 编写 插件 的 JavaScript 文件 
了 。 它 的 实现 步骤 如 下 。 
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(1) 获取 调用 插件 时 的 主题 类 名 参数 。 

(2) 获取 元 素 的 title 属性 ， 如 果 元 素 没 有 这 个 属性 ， 则 直接 停止 插件 工作 。 

(3) 创建 鼠标 在 元 素 的 悬 停 与 离开 事件 发 生 时 ， 插 件 对 定时 器 及 彩色 工具 提示 显示 与 
隐藏 的 设 定 。 

(4) 在 元 素 上 创建 <span> 元 素来 表示 彩色 工具 提示 。 

(5) 为 工具 提示 选 定 颜色 ， 如 果 颜 色 在 主题 中 被 设 定 ， 则 使 用 ， 否 则 使 用 默认 颜色 。 

(6) 注册 产生 彩色 工具 提示 的 触发 事件 。 


2. 基本 插件 功能 实现 


首先 ， 我 们 来 看 一 下 插件 的 基本 功能 代码 : 


1 (function($){ 

2 $.fn.colorTip = function(settings){ 

3 var defaultSettings = { 

4 color : "yellow'， 

要 timeout : 500 

6 } 

到 Var SupportedColors = ['red','green','blue', 'white','yellow', 
MLAack ll 

8 /* 将 默认 设置 合并 到 设置 参数 中 */ 

9 settings = $.extend(defaultSettings, settings); 

0 A 

a * ”遍历 所 有 的 元 素 

2 * ”将 插件 添加 至 方法 链 中 


3 */ 

14 return this.each(function(){ 

5 var elem = $ (this); 

16 // 如 果 当 前 遍历 的 元 素 title 属性 为 空 则 返回 

17 if(!elem.attr('title')) return true; 

18 // 创 建 事件 安排 对 象 及 提示 信息 对 象 

19 // 这 两 个 对 象 的 定义 在 插件 后 续 部 分 

20 var scheduleEvent = new eventScheduler() : 
上 Var tip = new Tip(elem.attr('title')): 

22 // 添加 工具 提示 到 当前 遍历 的 元 素 上 

23 // 并 应 用 插件 指定 样式 

24 elem.append (tip.generate()) .addClass('colorTipContainer'); 
2 // 判断 是 否 提供 了 插件 支持 的 颜色 

26 // 的 类 名 

安 兄 Var hasClass = false; 

28 for (var i=0;i<supportedColors.length;i++) 
29 { 

30 if(elem.hasClass (supportedColors[i])){ 
3 hasClass = true; 

32 break; 

33 

34 } 

35 // 如 果 已 经 设置 了 插件 支持 颜色 则 使 用 

36 if(!hasClass){ 

37 elem.addClass (settings.color); 


} 


]) 7 


| 
// 鼠 标 悬 停 到 元 素 上 则 显示 提示 
// 鼠 标 离开 则 提示 延迟 隐藏 


elem.hover (function (){ 
tip.show(); 
// 当 鼠标 移动 到 元 素 上 
// 清 除 先前 定义 的 延迟 隐藏 设置 
scheduleEvent.clear (); 
},function(){ 
// 鼠标 从 元 素 上 离开 
// 则 设 定 延 迟 隐藏 提示 
scheduleEvent .set (function(){ 
tip.hide(); 
},settings.timeout); 
ys 
// 删除 元 素 上 的 title 属性 


elem.removeAttr ('title'); 


57 }) (jQuery); 

上 述 代码 是 插件 的 整体 代码 ， 其 中 第 3~6 行 是 插件 的 默认 设置 。 第 7 行 设 定 了 插件 
会 支持 的 颜色 选择 数组 。 第 28 一 34 行 判断 调用 插件 所 提供 的 颜色 插件 是 否 支 持 。 第 41 一 
52 行 是 提示 显示 与 隐藏 的 触发 事件 ， 这 里 使 用 了 元 素 的 鼠标 悬 停 与 鼠标 离开 事件 。 下 面 给 
出 插件 中 要 使 用 的 两 个 内 置 对 象 的 定义 : 


/* 
Ww 
*/ 


事件 设 定 类 定义 


function eventScheduler () {} 
eventScheduler .prototype = { 


RE 


} 


clear: 


function (func,timeout){ 


// set 方法 设置 了 两 个 参数 


// 


-个 是 需要 执行 的 函数 ， 另 一 个 是 等 待 执行 的 时 间 周 期 


this.timer = setTimeout (func,timeout); 


function(){ 


// 清除 set 方法 中 定义 的 时 间 周 期 


clearTimeout (this.timer); 


| 

这 段 代 码 是 我 们 的 事件 处 理 加 工 对 象 ， 主 要 负责 提示 隐藏 周期 设置 和 当 提示 显示 时 ， 
删除 隐藏 周期 。 

于 /* 

2 / 提示 对 象 定义 

< 

4 function Tip(txt){ 

5 this.content = txt; 

6 this.shown = false; 
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8 
9 
10 
11 
be 
13 


14 


3 
16 
了 7 
18 
19 


20 
2 
22 
23 
24 
25 
26 


} 


Tip.prototype = { 


} 


generate: function(){ 
// generate 方法 产生 提示 对 象 
// 存储 在 tip 变量 中 
// 并 交 给 插件 进行 处 理 
return this.tip || (this.tip = $('<span class="colorTip"> 
'+this.content+ 
'<span class="pointyTipShadow"> 
</span><span class="pointyTip"> 
</span></span>')); 
}, 
show: function(){ 
if(this.shown) return; 
// 设 定 插件 显示 样式 并 以 淡 入 效果 出 现 
this.tip.css('margin-left',-this.tip.outerWidth()/2) .fadeIn 
("fast")> 
this.shown = true; 
}, 
hide: function(){ 
this.tip.fadeOut(); 
this.shown = false; 


上 述 代 码 是 提示 对 象 的 定义 ,第 9 一 15 行 利用 HIML 标记 <span> 组 成 提示 的 显示 样式 ， 
并 以 jQuery 对 象形 式 保存 交 给 插件 处 理 。 第 16 一 21 行 是 提示 对 象 的 显示 功能 。 第 22 一 25 
行 是 提示 的 隐藏 功能 。 

具体 效果 如 图 15.9 和 图 15.10 所 示 。 
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忆 等 。 作 为 全 球 最 大 的 消费 者 在 
领域 和 有 克 容 和 媒 笨 服务 ， 其 中 包括 雅虎 1 


球 最 大 的 网 上 贸易 市 场 
站 ， 成 为 全 球 商人 
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图 15.9 自 定 义 插 件 效果 一 
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Ca 
区 一 JE 加 bwiceoowjouensieoloripshm a -OX 


每 月 为 全 球 近 2. 5 亿 用 户 担 供 多 品 
庭 和 南 业 用 户 依 域 司 属 领 先 者 * 


明了 分 
包括 雅虎 电邮 、 雅 虎 通 、 要 难 虎 聊天 、 难 席 咒 卡 等 。 作 为 全 球 最 大 的 消费 者 在 
和 游 等 商务 服务 和 媒 林 服务， 其 中 包括 雅虎 人 育 ， 


企业 间 (B28) 电子 商务 的 著名 品牌 
i 六 有 


图 15.10” 自 定义 插件 效果 二 


15.3 ”插件 开发 规范 


前 面 介绍 了 jQuery 插件 的 相关 方法 ， 本 节 总 结 一 下 在 开发 jQuery 插件 的 过 程 中 应 该 
遵守 的 一 些 规范 。 

(1) 使 用 闲 包 。 这 个 规范 在 前 面 介绍 插件 基本 知识 的 时 候 已 经 介绍 过 , 它 的 优点 如 下 。 

口 避免 全 局 依赖 。 

口 避免 第 三 方 破坏 。 

口 兼容 jQuery 操作 符 。 

(2) 关于 this 关键 字 的 使 用 。 

口 不 要 重复 包装 this 关键 字 。 

口 除非 你 需要 返回 一 个 固有 的 值 ， 否 则 必须 返回 this 引用 ， 以 保持 jQuery 方法 的 链 

接 性 。 

(3) 通过 选项 对 象 传递 参数 给 插件 ， 而 不 要 使 用 零散 的 参数 形式 。 

(4) 不 要 在 插件 中 出 现 杂乱 的 插件 命名 空间 。 

(5) 必须 为 插件 的 方法 及 事件 命名 。 

(6) 利用 jQuery 提供 的 扩展 功能 ， 建 议 使 用 $.fn.extend 而 不 是 $.extend。 

S$.extend 用 于 扩展 自身 方法 ， 如 $.ajax，$.getJSON 等 ，$.fn.extend 则 用 于 扩展 jQuery 
类 ， 包括 方 法 和 对 jQuery 对 象 的 操作 。 为 了 保持 jQuery 的 完整 性 ， 建 议 使 用 $.fn.extend 进 
行 插件 开发 而 尽量 少 使 用 $.extend。 

(7) 选择 器 的 使 用 规范 如 下 。 

口 尽量 使 用 ID 选择 器 。 

口 在 样式 选择 中 尽量 搭配 上 标记 名 。 


的 < 
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口 避免 使 用 选择 器 迭代 。 


a a 所 


15.4 


本 章 主要 介绍 了 jQuery 插件 的 基础 知识 ， 以 及 如 何 开发 插件 。 重 点 内 
有 一 定 功能 的 插件 ， 以 及 在 开发 过 程 中 要 遵守 的 插件 开发 规范 。 插 件 开发 


部 分 。 
15.5 习 题 


自 定义 一 个 控制 元 素 显示 与 隐藏 的 插件 ， 并 可 更 换 元 素 


【习题 】 利 用 本 章 所 讲 内 容 ， 
背景 色 ， 要 求 符合 插件 编写 规范 。 
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